запретить масштабирование сайта на телефоне
Проблема масштабирования адаптивной верстки на мобильных браузерах
Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…
Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.
Еще раз повторюсь, что проблема не нова, и возможно многим верстальщикам знакома и может я зря так разжевываю, но все же на всякий случай постарался описать подробно.
И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport
который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.
Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 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 пикс не срабатывал. Не нашел.
Как я могу «отключить» масштабирование на мобильной веб-странице?
Я создаю мобильную веб-страницу, которая в основном представляет собой большую форму с несколькими текстовыми вводами.
Однако (по крайней мере, на моем мобильном телефоне Android) каждый раз, когда я нажимаю на какой-то ввод, вся страница масштабируется там, затеняя остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на веб-страницах moble?
ОТВЕТЫ
Ответ 1
Это должно быть все, что вам нужно
Ответ 2
Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, а ответ Бенни Нойгебауэра включает функцию target-densitydpi (которая устарела).
Это, однако, работает для меня:
Ответ 3
Здесь есть несколько подходов, и хотя позиция заключается в том, что обычно пользователи не должны быть ограничены, когда дело доходит до масштабирования для целей доступности, могут быть случаи, когда это необходимо:
Отобразить страницу по ширине устройства, не масштабировать:
Предотвращение масштабирования и предотвращение возможности масштабирования пользователя:
Удаление всех масштабирования, все масштабирование
Ответ 4
Вы можете использовать:
Но учтите, что с Android 4.4 свойство target-densitydpi больше не поддерживается. Поэтому для Android 4.4 и более поздних версий в качестве наилучшей практики предлагается следующее:
Ответ 5
Поскольку до сих пор нет решения для первоначальной проблемы, здесь мой чистый CSS два цента.
Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта во входных данных был 16px. Так
Ответ 6
пожалуйста, попробуйте добавить этот метатег и стиль
Ответ 7
Вы можете выполнить задачу, просто добавив в свой «head» следующий элемент «meta»:
Добавление всех атрибутов, таких как «ширина», «начальная шкала», «максимальная ширина», «максимальная шкала», может не работать. Поэтому просто добавьте элемент выше.
Ответ 8
Ответ 9
Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в iOS Safari, оно будет отключено при открытии сайта с помощью ярлыка на главном экране.
Добавьте эти метатеги, чтобы объявить ваше приложение «способным к веб-приложению»:
Однако только использовать эту функцию, если ваше приложение самообеспечивающееся, как/назад кнопки и адресной строке вперед как хорошо, как варианты обмена отключены. (Вы все еще можете провести пальцем влево и вправо, хотя) Этот подход, однако, позволяет довольно приложение, как UX. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана. Я также получил его на работу только после того, как я включил apple-touch-icon-180×180.png в мою корневую папку.
В качестве бонуса вы, вероятно, также захотите включить вариант этого:
Как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии вк?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии вк?
Здравствуйте. Как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии.
Как запретить масштабирование контролов на форме при изменении dpi экрана?
Всем здравствуйте. Речь об отсутствующем свойстве Scaled у форм студии. (В Delphi эта проблема.
Масштабирование окна. Как запретить?
Как запретить масштабирование окна, создаваемого средствами opengl? glutInitWindowSize (screenW.
Как запретить установку приложения на более ранние версии android?
Свой apk планирую раздавать не только с play.google.com, поэтому фильтровать версии android никто.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Масштабирование сайта как в Acrobat
Если в Adobe Acrobat масштабировать страницу до минимума, двигая правый нижний угол, то страница.
Как убрать авто-масштабирование сайта?
Не могу никак найти,как убрать функцию масштабирования странички при уменьшении размеров браузера,а.
Как убрать изображения из мобильной версии сайта?
Я решил сделать мобильную версию своего сайта, поэтому в дополнение к файлу «style.css» я создал.
Меню для сайта как в мобильной версии
Добрый день. Обыскал весь интернет, НЕ МОГУ НАЙТИ..Есть ли исходник простого меню на jquery, как.
Как запретить изменение файлов в директории сайта
Добрый день. Ситуация: каким то образом в директории моего сайта появились новые файлы с.
Как запретить отображение сайта в интернет эксплорере?
Подскажите, пожалуйста, знает ли кто-нибудь: есть ли скрипт, запрещающий отображение сайта во всех.
Как я могу «отключить» масштабирование на мобильной веб-странице?
Я создаю мобильную веб-страницу, которая представляет собой большую форму с несколькими текстовыми вводами.
Однако (по крайней мере, на моем мобильном телефоне Android), каждый раз, когда я нажимаю на какой-либо ввод, вся страница там увеличивается, скрывая остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на мобильных веб-страницах?
Это должно быть все, что вам нужно
Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, и ответ Benny Neugebauer включает target-densitydpi ( функция, которая не рекомендуется ).
Это, однако, работает для меня:
Рендеринг страницы по ширине устройства, не масштабировать:
Запретить масштабирование и запретить пользователю возможность масштабирования:
Снятие всего масштабирования, все масштабирование
Ты можешь использовать:
Поскольку до сих пор нет решения для первоначальной проблемы, вот мои два чистых CSS-цента.
Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта во входных данных был 16px. Так
решает проблему. Таким образом, вам не нужно отключать масштабирование и потерять специальные возможности вашего сайта.
Если ваш базовый размер шрифта не равен 16px или не равен 16px на мобильных устройствах, вы можете использовать медиазапросы.
пожалуйста, попробуйте добавить этот метатег и стиль
Похоже, что просто добавление метатегов в index.html не препятствует масштабированию страницы. Добавление стиля ниже сделает волшебство.
Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в iOS Safari, оно будет отключено при открытии сайта с помощью ярлыка главного экрана.
Добавьте эти метатеги, чтобы объявить ваше приложение «способным к веб-приложению»:
В качестве бонуса вы, вероятно, также захотите включить вариант этого:
Адаптация сайта на мобильных устройствах
Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).
Этот метатег вставляют в контейнер head вашего сайта.
По умолчанию мобильные браузеры отображают страницу сайта точно так же как и в ПК. Что естественно портит внешний вид сайта и делает мало пригодным для использования сайта на мобильных устройствах.
Для более детальной настройки отображения используем дополнительные значения
Ширина сайта на экранах мобильных устройств
Позволяет адаптировать ширину сайта под ширину экрана устройства
Это конечно несколько улучшает просмотр сайта, но только в плане того что ширина сайта становится такой же как и ширина экрана мобильного устройства. Зато делает абсолютно не читабельные страницы т.к. очень сильно уменьшает текст, картинки и т.п. А так же нарушает модульную сетку сайта.
Для того что бы сделать сайт еще и читабельный, зададим фиксированную ширину отображения страницы и уже при этой ширине будем в стилях править отображение текстов, блоков и т.д. На нашем примере возьмем за основу ширину сайта 600px:
А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.
Высота сайта на экранах мобильных устройств
В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.
Для исправления этой ошибки мы можем использовать правило
Масштабирование сайта на экранах мобильных устройств
С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.
Разрешить масштабирование на смартфоне:
Запретить масштабирование на мобильном телефоне:
Подитог
И так мы создали свой viewport и так же для него создали медиапзапрос
В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)
Viewport:
Медиазапрос:
рис.1 Отображение сайта без метатега viewport 
рис.2 Отображение сайта с атрибутом width=device-width
рис.3 Отображение сайта с атрибутом width=600
Верный viewport
Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов: