HTML5 Boilerplate: Meta viewport и width=device-width

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

Что касается этого недавнего изменения в HTML5BP:

"версии css для мобильных устройств/iOS"

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

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

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

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

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

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

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

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

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

Примечание. Вы можете увидеть этот эффект масштабирования в действии при просмотре веб-сайта HTML5BP на iPad/iPhone.

Мои вопросы:

  1. Становится ли это новым стандартом (например, масштабирование в ландшафтном режиме)?
  2. Я чертовски долго объясняю это изменение своим коллегам и начальству... Они привыкли видеть другой макет в горизонтальном режиме; теперь, когда страница масштабируется, а макет остается прежним (за исключением того, что он больше). Любые советы о том, как объяснить это невежественным массам (в число которых, возможно, входит и я)?

@robertc: Спасибо! Это очень полезно.

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

Я только что заметил HTML5BP index.html на github и < href="http://html5boilerplate.com/" rel="noreferrer">веб-сайт, использовал <meta name="viewport" content="width=device-width">; для меня это достаточно веская причина, чтобы отказаться от initial-scale=1, но я поднимаю брови, когда пытаюсь объяснить эти вещи для "не гиков". :D


html viewport html5boilerplate
person mhulse    schedule 13.06.2012    source источник
comment
В качестве обновления документы HTML5BP say Есть несколько различных параметров, которые можно использовать с этим метатегом. Дополнительную информацию можно найти в документах Apple для разработчиков.   -  person mhulse    schedule 21.06.2012
comment
О, я только что заметил, что они также ссылаются на Полное руководство Idiot по области просмотра и мультимедиа. Запросы!!!... Я прочитал это несколько раз, и я все еще немного потерян. :D   -  person mhulse    schedule 21.06.2012
comment
По состоянию на 25 июня 2012 года здесь есть интересная информация.   -  person mhulse    schedule 25.06.2012

Ответы (5)


arrow_upward
22
arrow_downward

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

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

person robertc    schedule 13.06.2012
comment
Большое спасибо за ответ! Из-за нехватки места для комментариев я добавил свой ответ на свой первоначальный вопрос. Еще раз спасибо! (P.S. Я не могу проголосовать за ваш ответ, пока мой представитель не достигнет 15... Извините за это.) - person mhulse; 13.06.2012
comment
Небольшая мысль: HTML5BP не начал использовать <meta name="viewport" content="width=device-width"> до недавнего времени... Вот почему я спросил, является ли это новым стандартом (учитывая, что так много людей рассматривают HTML5BP как отправную точку для своих проектов). Увидим ли мы теперь массу сайтов, не использующих initial-scale=1, что, в свою очередь, сделает его новым метастандартом/тенденцией области просмотра (то есть для тех людей, которые используют HTML5BP в качестве отправной точки) ? - person mhulse; 14.06.2012
comment
@MickyHulse Я не знаю, я бы начал с проверки комментариев к фиксации в HTML5BP, где она изменилась, и посмотрел, упоминается ли в ней причина. - person robertc; 14.06.2012
comment
Спасибо @robertc, я очень ценю помощь! :) - person mhulse; 15.06.2012
comment
Так все всегда работало в iOS, но не на многих других мобильных устройствах. - person trognanders; 09.11.2012

arrow_upward
11
arrow_downward

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

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

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

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

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

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

person trognanders    schedule 09.11.2012
comment
Спасибо за подробности и пояснения. +1. После публикации этого вопроса я решил использовать <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- rgne.ws/MOkRAX --> в <head> и наличие <script src="ios-orientationchange-fix.js"></script> <!-- rgne.ws/PYrfbZ --> внизу моих шаблонов. - person mhulse; 10.11.2012
comment
Я тоже ломал голову над кренделями, пытаясь понять параметры области просмотра для проекта адаптивного веб-дизайна. Действительно неудачный ответ заключается в том, что каждая платформа ведет себя по-разному. Разработчики, которые сосредоточены в основном на Android или Apple, склонны думать, что есть только одно поведение, и часто удивляются/обеспокоены, когда пробуют другое. - person trognanders; 10.11.2012
comment
Я согласен с Бейли. Я сосредоточился в основном на устройствах iOS, в основном потому, что у меня нет легкого доступа к материалам Android. Кроме того, в качестве обновления: похоже, что ошибка ориентации iOS была исправлена ​​в iOS6. Я не нашел статей с подробным описанием этого, но из того, что я тестировал, iOS6 больше не показывает ориентацию ошибка. Основываясь на этой новой информации, я больше не буду включать скрипт ios-orientationchange-fix в свои шаблоны. - person mhulse; 16.11.2012

arrow_upward
6
arrow_downward

Небольшое обновление: это все еще в черновике, но это определенно то, на что стоит обратить внимание. Также имеет версию с префиксом для поддержки IE 10. Использование CSS вместо HTML устраняет большую часть путаницы, о которой вы говорите, применяя initial-scale:1; к 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"> переводится как

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

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

@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/

person darcher    schedule 24.12.2013

arrow_upward
2
arrow_downward

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

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

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

person Justin    schedule 08.10.2013

arrow_upward
2
arrow_downward

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
person Piotr Ciszewski    schedule 24.02.2014