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

Question

[vetsb]

Здравствуйте. Сверстал десктоп сайта, взялся за адаптив. Смотрю макеты для 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);

Но он просто бесконечно уменьшает, увеличивает и все скачет, не понимаю почему так.

Answer 1

[Дмитрий Беляев]

Адаптив надо делать не скриптами и управлением вьюпортом, а медиазапросами на стилях
А вьюпорт на адаптивном сайте должен быть всегда

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Comments

[vetsb]

Ну а как сделать через медиа? Я не понимаю. Изменять viewport - неправильно, я знаю.

[Дмитрий Беляев]

Дмитрий Лебёдкин:

@media only screen and (max-width: 479px) {
  /* тут стили для маленьких экранов */
}

Answer 2

[sergey]

Пишем для этих расширений следующее:

@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
//css code here
}

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

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

Comments

[vetsb]

Нет, макет для 320 - это копия 480, просто уменьшена пропорционально. Страница 11к пикселей в высоту, менять все размеры - не очень, мягко говоря. Для .page поставил zoom: 0.6, вроде стало, как должно быть.

[sergey]

Дмитрий Лебёдкин: да не важно что там копия: я вам написал как это правильно надо делать, есть общепринятые правила адаптации. И да zoom это вообще ерунда

Answer 3

[Егор Мокеев]

Используйте transform: scale

Примерно так, не факт что работает, но, думаю, идея понятна

var scaleWidth = 480;
var width = window.innerWidth;
if (width < scaleWidth)
{
    var scale = width / scaleWidth;
    document.body.style.transform = "scale(" + scale  + ")";
}