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

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

Автоматическое масштабирование и когда оно используется.

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

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

Вид страницы сайта отрезан в браузере. Такая ситуация происходит с устройствами книжной ориентации.

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

Отрезал страницу. Всю страницу, как это изложено в 1024 ширина которого видна и увеличенной до размеров. Это изложено в 1024 ширина которого видна и увеличенной до размеров.
Отображается в Windows 8 браузер ie10

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

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

Использование @-ms-viewport

Если ваш сайт уже способен изменять размер макета до 320 пикселей, с помощью  CSS3 Media Queries . Значит 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 пикселей (альбомный), 320 пикселей (книжный) и 1024 пикселей (альбомный). Что бы увидеть правила @-ms-viewport в действии.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>