@vetsb

Как начать уменьшать сайт, когда ширина меньше 480 пикселей?

Здравствуйте. Сверстал десктоп сайта, взялся за адаптив. Смотрю макеты для 480 пикселей, нормально все. А для 320 просто все уменьшено пропорционально через трансформацию. Как сделать так, чтобы когда уменьшаешь окно браузера до 480 пикселей, то дальше все начинает уменьшаться до 320, а потом появляется скролл. Пытался сделать вот так:

var width = $(window).width();
var content = '';
var viewport = $('head meta[name="viewport"]')

if (width <= 479) {
    content = '<meta name="viewport" content="width=device-width, initial-scale=0.66, maximum-scale=0.66, user-scalable=no">';
} else {
    content = '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">';
}

if (viewport.attr('content') != content)
    viewport.attr('content', content);


Но он просто бесконечно уменьшает, увеличивает и все скачет, не понимаю почему так.
  • Вопрос задан
  • 295 просмотров
Пригласить эксперта
Ответы на вопрос 3
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Адаптив надо делать не скриптами и управлением вьюпортом, а медиазапросами на стилях
А вьюпорт на адаптивном сайте должен быть всегда
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Ответ написан
zorro76
@zorro76
Пишем для этих расширений следующее:
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
//css code here
}

и никаких скриптов и тем более изменения vievport

UPD но если вы хотите застопорить свой размер сайта на 480px, то сделайте простую min-width: 480px для вашего сайта, и тогда при уменьшении размера до 320 появится просто горизонтальный скролл при просмотре.
Ответ написан
zetamen
@zetamen
В поисках нового
Используйте transform: scale

Примерно так, не факт что работает, но, думаю, идея понятна
var scaleWidth = 480;
var width = window.innerWidth;
if (width < scaleWidth)
{
    var scale = width / scaleWidth;
    document.body.style.transform = "scale(" + scale  + ")";
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы