HTML5 Boilerplate: Meta viewport и width = ширина устройства

Я создаю адаптивный/отзывчивый веб-сайт.

Относительно этого недавнего изменения в HTML5BP:

" изменения для мобильных /iOS css"

Я начал использовать:

<meta name="viewport" content="width=device-width">

... и у меня это в моем CSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Когда был включен initial-scale=1, поворот с вертикального на горизонтальный (на iPad/iPhone) привел к тому, что макет изменился с двух столбцов (например) на 3 столбца (из-за запросов meida, initial-scale=1 и Исправление JS для ошибки масштаба видового экрана).

Подводя итоги, в ландшафтном режиме это увеличивает масштаб страницы:

<meta name="viewport" content="width=device-width">

... и это не так:

<meta name="viewport" content="width=device-width, initial-scale=1">

Примечание. Этот эффект масштабирования можно увидеть в действии при просмотре index.html в github и сайт, использовал <meta name="viewport" content="width=device-width">; для меня это достаточно хорошая причина, чтобы вырвать initial-scale=1, но я получаю поднятые брови, когда я пытаюсь объяснить эти вещи для "не-geeks".: D

Ответы

Ответ 1

Это не новый стандарт, он как всегда работал AFAIK. Если вы установите ширину на фиксированное количество пикселей, то поворот портрета к пейзажу просто изменит масштаб, так как количество виртуальных пикселей остается постоянным. Я предполагаю, что добавление initial-scale=1 блокирует масштабирование при переходе между ними - то есть коэффициент масштабирования вашей страницы не изменяется при повороте устройства. Как выглядит страница, если вы сначала загружаете ее в пейзаж вместо портрета?

Я бы предположил, что если вам нужно поведение, которое вы получите при указании initial-scale=1, укажите initial-scale=1. HTML5 BoilerPlate - это то, что вы должны изменить в соответствии с вашими требованиями.

Ответ 2

Apple [несколько] четко описывает поведение в режиме просмотра здесь.

В основном, ширина устройства и высота устройства в устройствах iOS относятся к размерам экрана в портретном режиме. Если вы установите ширину окна просмотра в ширину устройства, это будет то же самое, что и установка ее значения постоянной. Поэтому, когда физическая ширина экрана изменяется с изменением формата, браузер растягивает постоянный размер, который вы ввели в ширину экрана в альбомном режиме. Такое поведение не является ни неправильным, ни правильным, это просто так.

Apple предлагает width=device-width для приложений, адаптированных к платформе, поэтому это, безусловно, способ "Apple":

Если вы разрабатываете веб-приложение специально для iOS, Рекомендуемый размер для ваших веб-страниц - это размер видимой области на IOS. Apple рекомендует установить ширину на ширину устройства, чтобы масштаб составляет 1,0 в портретной ориентации, а в окне просмотра нет изменяется, когда пользователь переходит в альбомную ориентацию. [То есть. В окне просмотра сохраняется ширина портрета, но масштабируется или растягивается для представления в соответствии с шириной ландшафта]

Лично я предпочитаю начальный масштаб = 1.0 без абсолютного подхода к настройке ширины устройства, так как он делает окно просмотра всегда заполняющим экран устройства без растягивания. Apple также считает эту действительную разметку:

На рисунке 3-14 показана та же веб-страница, когда начальная шкала установлена ​​на 1.0 на iPhone. Safari на iOS отображает ширину и высоту, чтобы соответствовать веб-странице в видимой области. Ширина окна просмотра установлена ​​на ширину устройства в портретной ориентации и высоте устройства в альбомной ориентации.

Ответ 3

Чтобы добавить небольшое обновление: Это все еще в черновике, но это определенно что-то, что нужно изучить. Также имеет префиксную версию для поддержки IE 10. Используя CSS вместо HTML, он очищает много путаницы, о которой вы говорите, применяя initial-scale:1; to zoom:1; и предоставляя опции min/max для width, height и zoom, который будет увеличивать диапазон регулировки, если потребуется.

extend-to-zoom на помощь! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)

<meta name="viewport" content="initial-scale=1.0"> переводится в & hellip;

@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}
@-ms-viewport{
  width: extend-to-zoom; 
  zoom: 1.0;
}

где as <meta name="viewport" content="width:device-width,initial-scale=1.0"> переводится на & hellip;

@viewport{
  zoom: 1.0;
  width: device-width; /* = 100vw */
}
@-ms-viewport{
  width: device-width;
  zoom: 1.0;
}

Примечание: width:extend-to-zoom 100%; равно width:device-width;

http://dev.w3.org/csswg/css-device-adapt/

Ответ 4

Я нашел описание виджета Mozilla наиболее подробное и полезное. Вот выдержка:

Свойство width определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, например width=600, или на значение значения ширины специального значения, которое является шириной экрана в пикселях CSS в масштабе 100%. (Имеются соответствующие значения height и device-height, которые могут быть полезны для страниц с элементами, которые изменяют размер или позицию на основе высоты окна просмотра.)

Свойство initial-scale управляет уровнем масштабирования при первой загрузке страницы. Свойства maximum-scale, minimum-scale и user-scalable управляют тем, как пользователям разрешено увеличивать или уменьшать страницу

Ответ 5

Вы пробовали это?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">