Автоматическое масштабирование

Новые версии браузеров поддерживают ширину и высоту для адаптации устройств. Это даёт веб-разработчикам простой инструмент управления автоматическим масштабированием контента для различных размеров экрана.

Большинство веб-сайтов сделаны шириной 1024 пикселей. Это обеспечивает хорошее взаимодействие для широкого спектра дисплеев. Но эти сайты, не полностью видны на мобильных устройствах в книжной ориентации экрана, если CSS без медиа-запросов. Обычно такие страницы обрезаются или искажаются при просмотре сайта на узком экране.

Отображается в очень узком окне. Левой навигационной панели отображается; признакам статьи для чтения, но завернутые в очень узкой колонке.
Сайт Вики на узком экране

Вид страницы сайта с горизонтальной прокруткой. Такая ситуация происходит когда устройство в книжной ориентации. В новых браузерах книжный режим масштабируется автоматически для отображения содержимого макета шириной 1024 пикселей. Браузеры на мобильных устройствах принимают аналогичный подход. Так как большинство сайтов создаются с шириной 1024 пикселей, это гарантия того что содержание сайта будет не весь экран без горизонтальной прокрутки.

Это изложено в 1024 ширина которого видна и увеличенной до размеров.
В Windows 8 браузер ie10

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

Лучший узкий макет тот, который был продуман до конца. В дополнение к настройкам сайта, может потребоваться адаптировать изображение, изменение порядка содержания, альтернативные инструменты для навигации по сайту, или другие существенные изменения в содержание.

-ms-viewport

Если вашем сайте медиа-запросы меняют оформление макета до размера 320 пикселей. Значит CSS перекрывает значение по умолчанию автоматического масштабирования:

@media screen and (max-width: 320px) {
@-ms-viewport { width: 320px; }
}

Когда окно меньше ширины 320 пикселей, контент будет уменьшаться. Например 300 пикселей в ширину окно покажет содержание в масштабе 93,75%.

Если ваш сайт шириной 768 пикселей, значит книжный режим может быть легко добавлен вторым правилом:

@media screen and (max-width: 320px) {
@-ms-viewport { width: 320px; }
}

@media screen and (min-width: 768px) and (max-width: 959px) {
@-ms-viewport { width: 768px; }
}

Тестируйте ваш сайт с шириной 768 и 1024 пикселей — альбомный, 320 пикселей — книжный вариант, чтобы увидеть правила @-ms-viewport в действии.

54321
(1 голос, в среднем: 5 из 5)