Проблема масштабирования адаптивной верстки на мобильных браузерах. Масштабирование сайта под окно браузера

Адаптация веб-сайта под различные размеры окна – IEBlog Русский

Internet Explorer 10 в Windows 8 Release Preview поддерживает свойства ширины и высоты при адаптации для устройств CSS по рабочему черновику консорциума W3C. Это обеспечивает веб-разработчикам простое средство для управления автоматическим масштабированием контента в окнах различных размеров. В частности, это позволяет веб-сайтам легко адаптироваться под браузер Windows 8 в стиле Metro в прикрепленном представлении с книжной ориентацией.

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

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

Узкая разметка особенно важна в Windows 8, где прикрепленное представление браузера в стиле Metro имеет именно такой вид. Такая ситуация часто возникает при книжной ориентации на планшетах из-за малого размера форм-фактора.

В браузере в стиле Metro прикрепленное представление и книжная ориентация автоматически масштабируются по умолчанию, чтобы обеспечить ширину разметки как минимум 1024 пикселя. В мобильных устройствах с узким форм-фактором при отображении не оптимизированных для них страниц применяется похожий подход. Поскольку большинство страниц оптимизированы под ширину 1024 пикселя, они отображаются корректно, не урезая контент по умолчанию.

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

Эффективная работа в узком окне

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

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

Замечательные примеры адаптированных разметок можно найти на веб-сайте Media Queries. А на веб-сайте Metal Toad Media можно ознакомиться с интересной статьей, в которой обсуждается поддержка ширины разметки с учетом типов устройств и размеров экрана, преобладающих на рынке.

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

Простая поддержка для прикрепленного представления. Если ваш веб-сайт совместим с разметкой под ширину 320 пикселей, вы можете выбрать эту настройку для прикрепленного представления. Комбинирование адаптации устройств с медиа-запросами CSS позволяет избирательно отменять функции автоматического масштабирования. Таблица CSS отменяет автоматическое масштабирование по умолчанию, а вместо него задает последовательную ширину разметки 320 пикселей для всех окон шириной 320 пикселей или более узких:

@media screen and (max-width: 320px) {

}

При ширине окна менее 320 пикселей масштаб контента будет уменьшен, чтобы в окне поместилась вся страница. Например, окно шириной 300 пикселей будет отображать контент в масштабе 93,75%. Для окон большей ширины будет применяться обычное масштабирование Internet Explorer 10 (например, когда для браузера в стиле Metro задана книжная ориентация).

Однако функция адаптации устройств бесполезна в браузерах, которые еще не поддерживают ее. Но в таких браузерах можно воспользоваться поддержкой узкой разметки: в них просто не выполняется автоматическое масштабирование для подгонки контента под размер окна.

Поддержка книжной ориентации. Если ваш веб-сайт поддерживает также разметку шириной 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 пикселей (браузер в стиле Metro, прикрепленное представление) в дополнение к ширине 1024 пикселя или больше (альбомная ориентация). Пример правила для окна просмотра в действии можно увидеть в демонстрационном ролике Make it Snappy! на веб-сайте тестирования Internet Explorer.

— Мэтт Ракоу (Matt Rakow), руководитель программы, Internet Explorer

blogs.msdn.microsoft.com

Проблема масштабирования адаптивной верстки на мобильных браузерах — Toster.ru

Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.

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

И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport

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

который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.

Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.

Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).

Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.

Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.

В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?

Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?

Пытался найти способ как сделать так, чтобы при размере экрана меньше 900 пикс, viewport срабатывал бы, а при размере больше 900 пикс не срабатывал. Не нашел.

P.S. прошу прощения что не разместил этот текст в q&a, упустил этот момент, а теперь уже не могу поменять.

toster.ru

viewport meta tag, масштабирование веб страниц в мобильных браузерах

Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег <meta name="viewport">, который по традиции потом сперли все остальные производители браузеров.

Давайте рассмотрим типично-эпичную верстку сайта:

html

Откроем его в мобильном браузере. Вот что мы увидим:

Как вы правильно заметили, текст слишком мелкий и произошло это потому, что сафари попытался вместить наш сайт (который по его предположению сделан для браузеров с шириной экрана около 980pх)

Давайте теперь сообщим браузеру, что наш сайт адаптирован для любой ширины экрана.

html

Что получилось:

Ну вот, теперь все намного лучше. Обозначив width=device-width, мы сказали браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content="width=320px", но этого не рекомендуется делать, потому-что различные смартфоны могут иметь абсолютно различную ширину экрана.

Очень распространенным вариантом является:

html

такой вариант задает ширину страницы и начальный масштаб (в данном случае без масштабирования)

Также часто используется следующий вариант:

html

Такие значения используют в случае, если сайт будет использоваться и функционировать как мобильное приложение. Т.е

1. при загрузке страницы она не будет смасштабирована
2. страница займет всю ширину мобильного браузера
3. запрещено любое пользовательское масштабирование
4. доступен только горизонтальный и вертикальный скролл

Используйте эту конфигурцию, только в том случае, если знаете, что делаете.

Давайте разберем допустимые параметры и их значения, доступные в мета теге viewport

width

Целое число (от 200px — 10,000px) или “device-width”.

Задает ширину viewport. Если нирина viewport не указана, то:

• для мобильного Safari это 980px
• Opera — 850px
• Android WebKit — 800px
• IE — 974px

height

Целое число (от 223px до 10,000px) или “device-height”

задает высоту viewport. 99% случаев, просто не обращайте внимания на этот параметр, но если сильно надо – пробуйте и экспериментируйте. Удачи..

initial-scale

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Задает масштаб страницы. Увеличиваем значение – увеличиваем масштаб.

user-scalable

Доступные значения no или yes

Задает возможнось изменения масштаба страницы. По-умолчанию установлено как yes в Safari.

minimum-scale и maximum-scale

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Определяет минимальный и максимальный масштаб viewport соответственно.

По-умолчанию в мобильном Safari minimum-scale = "0.25", maximum-scale = “1.6”.

Совет: Не используйте мета-теги (в том числе и этот), пока не разобрались, зачем все это нужно. И тестируйте все в различных мобильных браузерах. Удачи!

html5.by

Проблема масштабирования адаптивной верстки на мобильных браузерах

Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…

Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.

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

И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport

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

который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.

Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.

Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).

Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.

Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.

В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?

Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?

Пытался найти способ как сделать так, чтобы при размере экрана меньше 900 пикс, viewport срабатывал бы, а при размере больше 900 пикс не срабатывал. Не нашел.

Автор: battrack

Источник

www.pvsm.ru

Масштабирование картинок | WebReference

Если для элемента <img> не задать атрибуты width и height, то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.

Изменение масштаба и пропорций изображения делается как через атрибуты <img>, так и через стили.

Использование атрибутов

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

Пример 1. Размеры в пикселях

В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

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

Пример 2. Размеры в процентах

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Масштабирование через стили

Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height. Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента <figure>.

Пример 3. Размеры через стили

Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width, то стили имеют приоритет выше.

Интерполяция

Предположим, что у нас есть растровая картинка размером 200х200 пикселей и мы увеличиваем её пропорционально по ширине в два раза. Площадь изображения и общее количество пикселей вырастет при этом в четыре раза. Новые пиксели добавляются браузером самостоятельно исходя из набора уже имеющихся. Способ получения этих новых пикселей называется интерполяцией изображения. Надо понимать, что качество очень сильно зависит от самого изображения, масштаба и алгоритма, но обычно результат получается хуже оригинала.

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

Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering. К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.

Пример 4. Изменение алгоритма интерполяции

Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.

Рис. 3. Вид картинок после увеличения масштаба

Вписывание картинки в область

Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).

Пример 5. Использование overflow

Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри <figure> устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.

Рис. 4. Фотография внутри области заданных размеров

Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover, оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.

Пример 6. Использование object-fit

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

webref.ru

Смотрите также

• 
  Как настроить браузер комодо драгон
• 
  Как убрать 12kotov из браузера
• 
  Работа без мыши в браузере
• 
  Как убрать из браузера mns
• 
  Alibonus расширение для яндекс браузера
• 
  Как удалить скайп браузер хост
• 
  Шумит вентилятор при запуске браузера
• 
  Выключается компьютер при включении браузера
• 
  Как почистить кэш браузера макстон
• 
  Как отключить удаление журнала браузера
• 
  Как удалить 1xbet из браузера