Как сделать scale для определённого размера экрана?

Question

[del993788]

Здравствуйте. Посмотрите пожалуйста на мои стили:

<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" /> <!-- Все стили и стили при размере экрана более 1340px  -->
<link rel="stylesheet" media="screen and (min-width: 690px) and (max-width: 999px)" href="{THEME}/style/adap-phone-tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1309px)" href="{THEME}/style/adap-pc-tablet.css" />

Почитал я документацию по viewport, но так и не разобрался. Как сделать так, чтобы при размерах от 320px до 689px сайт просто зуммировал стиль adap-phone-tablet.css ? Я попытался в начале отдельно написать стиль для размеров 320 и 689, но ничего годного не вышло, поэтому лучше, чтобы на 320 пикселях сайт выглядел так же, как и на 690, только был зуммирован. Подскажите, как такое сделать?

Answer 1

[Максим Алёхин]

Попробуйте вот такой скриптец:

<script>
;(function($){
var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
	if(Math.abs(window.orientation) === 0){
		if(/Android/.test(window.navigator.userAgent)){
			if(!portraitWidth)portraitWidth=$(window).width();
		}else{
			portraitWidth=$(window).width();
		}
		$("html").css("zoom" , portraitWidth/320 );
	}else{
		if(/Android/.test(window.navigator.userAgent)){
			if(!landscapeWidth)landscapeWidth=$(window).width();
		}else{
			landscapeWidth=$(window).width();
		}
		$("html").css("zoom" , landscapeWidth/320 );
	}
}).trigger("resize");
})(jQuery);
</script>
<script>
$(window).bind('resize load', function(){
    if ($(window).width() >= 320 && $(window).width() <= 689) {
        $("html").css("zoom", $(window).width()/320 );
    } else {
        $("html").css("zoom", 0);
    }
});
</script>

Взял из одного из наших проектов (дизайнер наш написал)

Comments

[del993788]

я не шарю в js, поэтому не разобрался... вставил этот код в шапку и получил тупо увеличенный сайт...

[Максим Алёхин]

Это ожидаемый результат с учетом вопроса, но если нужно что бы зум шел от 320px до 689px,
то добавьте условие:

if ($(window).width() >= 320 && $(window).width() <= 689) {
$("html").css("zoom", $(window).width()/320 );
} else {
$("html").css("zoom", 0);
}