User scalable no не работает

Метатег viewport: почему он важен и как его правильно использовать

Viewport — это область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства.

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

Чтобы пользоваться сайтами было удобно, нужно правильно масштабировать страницы. Для этого используется метатег viewport. Он не делает верстку адаптивной. Его предназначение — контроль масштаба отображения страницы.

Используем силу скриншотов, чтобы понять значение метатега viewport.

Я создал HTML-документ с двумя предложениями:

Так он выглядит на десктопе.

Не идеально, но прочитать можно. А теперь воспользуемся инструментами разработчика и посмотрим, как эта же страница выглядит на экране смартфона.

Почему так плохо? Потому что браузер думает, что страница предназначена для десктопа, и старается впихнуть ее в размеры экрана. Вы наверняка еще встречаете сайты, которые приходится масштабировать пальцами. Это позапрошлый век.

Теперь давайте добавим в наш код одну строчку: .

Обновим страницу и посмотрим, как она теперь выглядит на экране смартфона.

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

Чтобы это не выглядело магией, давайте разбираться, как работает метатег viewport.

Два разрешения экрана: физическое и CSS

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

Метатег viewport решает эту проблему адаптивного дизайна с помощью двух параметров: width и initial-scale.

Параметр width=device-width приравнивает ширину вьюпорта к CSS-ширине устройства. CSS — это не физический размер, а некая величина, предназначенная для того, чтобы адаптивный дизайн отображался на экранах одинаково.

CSS-разрешение зависит от плотности пикселей.

• Если плотность пикселей меньше 200ppi, то коэффициент будет 1. То есть у экрана с физическим разрешением 320×480 пикселей будет CSS-разрешение 320×480 пикселей.
• Плотность пикселей 200-300ppi — коэффициент 1,5.
• Плотность пикселей больше 300ppi — коэффициент рассчитывается по формуле плотность/150, а полученное значение округляется (2, 2.5, 3 и так далее).

Размер области просмотра конкретного устройства можно узнать на этом сайте — тогда не придется высчитывать его самостоятельно. Но под все экраны подстроиться все равно не получится — их слишком много. Поэтому при верстке обычно пользуются универсальными значениями.

Правильное использование метатега viewport

Для области просмотра можно определить следующие параметры:

• width — ширина области viewport. Принимает значение device-width или фактическое число пикселей в виде целого неотрицательного числа — например, 320px.
• height — высота области viewport. Принимает значение device-height или фактическое число пикселей.
• initial-scale — коэффициент масштабирования начального размера viewport. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
• user-scalable — указывает, может ли пользователь масштабировать страницу жестами. Принимает значение yes или no.
• minimum-scale — минимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
• maximum-scale — максимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.

Универсальное использование метатега viewport выглядит так:

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

Мы также можем поиграть со значениями — например, задать конкретную ширину в пикселях:

Посмотрим, что стало со страницей.

Появился горизонтальный скролл. Это очень неудобно, особенно когда на странице много текста. Все из-за того, что браузер отображает страницу шириной 980px.

Добавление ширины страницы в пикселях может быть полезным, если у шаблона неадаптивный дизайн. Например, если ширина макета 1024 пикселя, нужно указать ее в атрибуте width. Тогда браузеры не будут обрезать стороны. Главное, не запрещать пользователям масштабирование, чтобы они могли приблизить страницу, и не добавлять атрибут initial-scale:

Можно поиграть со значением изначального масштабирования. Например, сделать его не 1.0, а 5.0. Тогда страница при открытии в браузере будет увеличена в 5 раз. Можно также указать минимальное и максимальное значения масштабирования, которое доступно пол ьзователям.

Очень аккуратным нужно быть с атрибутом user-scalable. По умолчанию его значение yes — то есть пользователи могут увеличить страницу жестами. Спецификация HTML настоятельно не рекомендует запрещать масштабирование страницы.

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

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

Ошибка: значение метатега viewport не задано

Сообщение о том, что значение метатега viewport не задано, обычно говорит о том, что инструменту проверки не удалось найти в HTML-коде нужное правило.

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

Источник

user-scalable=нет, не работает, он все еще поддерживается?

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

и это не работает. Я ничего не могу найти, похоже, что я единственный, кто сталкивается с этой проблемой. Поддерживается ли он по-прежнему в более новых версиях iOS? Большинство сообщений, которые я нашел, довольно старые

1 ответ

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

Как я могу определить масштаб (или расстояние защемления) щепотки для масштабирования, когда meta name=viewport установлен на user-scalable=yes ? Я тестировал на Android, но щепотка Для увеличения не может быть обнаружена, если meta name=viewport установлен на user-scalable=yes . Если meta.

Приземлился на этот пост с той же проблемой. Оказывается, кажется, что требуется иметь ширину css, указанную на html и/или теле. По крайней мере, он начал работать, добавив это

Похожие вопросы:

Я работаю над веб-приложением, которое имеет ширину 640 пикселей. В документе head я установил таким образом, контент хорошо.

Я хотел бы включить опцию user-scalable=no в свой веб-шаблон, чтобы устройства шириной 640 пикселей и ниже не масштабировались. Текущий дизайн хорошо масштабируется при размерах экрана больше 640.

Я разрабатываю приложение Phonegap на основе android sdk и Eclipse. Просто взял код по умолчанию и добавил для масштабируемости, но он не позволяет мне увеличивать или уменьшать масштаб.

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

Как я могу определить масштаб (или расстояние защемления) щепотки для масштабирования, когда meta name=viewport установлен на user-scalable=yes ? Я тестировал на Android, но щепотка Для увеличения.

Это мета тег Проблема — я хотел принудительно перерисовать (чтобы.

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

Я думаю, что этот вопрос должен быть довольно простым. Я с нетерпением жду сохранения JAXB сгенерированных классов из схемы в базу данных с помощью JPA аннотаций. Я наткнулся на Hyperjaxb3, но.

Я читал разные темы, но так и не пришел к четкому выводу, в чем заключаются различия, преимущества и недостатки использования user-scalable=no в случае А или случае в? Я собираюсь сделать адаптивный.

Почему desktop-chrome игнорирует это: Я могу изменить размер содержимого.

Источник

Почему не работает viewport?

Подскажите, а viewport сейчас работает или его уже убрали?
Пытаюсь ограничить максимальное разрешение для сайта 900px, и как только не делал, результат нулевой, т.е. на экране без изменений.
Что писал:
и много еще разных комбинаций

Смотрю на планшете с разрешением: 2560×1600, ширина сайта всегда 980px.
Я конечно могу медиа запросами подогнать разрешение под 980px, но сейчас вопрос не про то.
На телефонах разрешение меньше, так что там сразу уходит на 320, 360. в зависимости от телефона.

• Вопрос задан более двух лет назад
• 1950 просмотров

Пытаюсь ограничить максимальное разрешение для сайта 900px

и min-width 900px для сайта.

Смотрю на планшете с разрешением: 2560×1600, ширина сайта всегда 980px.

У меня на сайте в отладочной информации, сам на js написал, тоже самое показывает, так что на сайте ничего нового не увидел.

PS. На планшете батарейка кончилась, он выключился, сейчас зарядил, включил его и о чудо, правильно все работает. Подозреваю, что дело было в кеше, так как это не десктопный браузер и тут сложно как-то обнулить кеш. Опыты продолжаются )

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

получаю: 900×1407
причем даже на телефонах стало 900

Источник

User-scalable=no not working in Samsung Internet v5.4 #12

Comments

katrinaiva commented Jun 6, 2017 •

Hi,
My intention is to prevent user from zooming in or out. The above code isn’t working in Samsung Galaxy S6, native browser. Ver 5.4.00-75.

The text was updated successfully, but these errors were encountered:

poshaughnessy commented Jun 15, 2017

Thank you for raising this @katrinaiva and apologies for the slow follow up. I’ve just checked into this and I’ve replicated it too. I’ve raised this with colleagues now to check with them and I hope to get back to you ASAP.

poshaughnessy commented Sep 20, 2017

Replicated in Samsung Internet v6.2 beta too 🙁

pierredewilde commented Oct 23, 2017

In Samsung Internet 5.4 and 6.2 Beta, there is a setting to bypass viewport:

By default, Manual zoom is enabled. Disable it to restore normal viewport behaviour.

poshaughnessy commented Nov 3, 2017

Thank you very much @pierredewilde, I should have known this!

So it seems like this is ‘expected’ behaviour after all (although I didn’t expect it :))

I will close this issue then, but if you feel that we need to change something to do with this, please continue to comment or add a separate feature request issue, and we can pass on the feedback internally.

edenprojectde commented Sep 28, 2018

How can this be a expected behaviour? No Browser behaves like this, and as a Webdev this ruins the whole symmetry of having a page 100vw. I can zoom out even tough it’s not expected. This means i need to adjust the page for every phone to behave right and fight this setting which is really extremly irritating.

markoliverbrawn commented Nov 8, 2018

Feels like it should be «off» by default, not «on». I think that this phrase says it all:

Disable it to restore normal viewport behaviour.

edenprojectde commented Nov 14, 2018

@poshaughnessy Will this be fixed or will it be ignored?

poshaughnessy commented Nov 14, 2018

@edenprojectde Sorry I don’t work there at Samsung anymore, hopefully one of the team there can help answer if there are any plans to change this.

tobiasgraeber commented Jan 3, 2019 •

Please reopen this issue! Or please provide us any information about who we could send / assign this issue to?!

Zoom is not respected correctly on samsung browser anymore if this is turned on .

• As stated before this «feature» should be «off» by default instead «on» and is still not resolved!

At least there should be any explaination about the reasons behind this and / or maybe how you (als a web developer) could force / override this setting or something like that.

Источник

iOS / мобильное сафари по-прежнему масштабируется, а для области просмотра установлено значение user-scaleable = no? Проверьте настройки специальных возможностей!

Эта конкретная проблема с мобильным Safari (на первый взгляд невозможная, но все же недокументированная) заставляла меня работать долгое время сегодня, и я как раз собирался задать вопрос об этом здесь, когда понял.

Проблема: хотя я установил , мое веб-приложение для iPad по-прежнему позволяло масштабировать вручную (зажимать пальцы в браузере). — Но только на iPad, а не на iPhone.

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

• С поворотом от пейзажа к портрету проблем не было, размеры и расположение всего имели смысл.
• После этого поворот из портретной ориентации обратно в альбомную и . окно просмотра осталось таким же широким, как и в портретном режиме, т.е. он был увеличен (масштабирован). Мне пришлось вручную уменьшить масштаб, чтобы вернуться к полному изображению / окну просмотра. Что должно быть невозможно.

4 ответа

Затем я нашел отличную демонстрацию CSS-макета iPad с ландшафтным / портретным режимами. Это выглядело многообещающе, но у меня возникла такая же проблема. Тем не менее, во время тестирования этого на втором iPad он работал идеально: никаких проблем с масштабированием. Итак, мы решили, что это связано с моим конкретным iPad.

Потом меня осенило: несколько недель назад я возился с настройками специальных возможностей. Увеличение всего интерфейса, как в OSX (ctrl + scroll) и т. Д. Может быть, это каким-то образом связано с Mobile Safari? Что ж, оказывается, это так.

Сегодня я узнал: Когда включен Универсальный доступ> Масштаб, это отменяет настройки мета-области просмотра .

Попробуйте сами? Вы найдете его здесь: Settings > General > Accessibility > Zoom

Примечание: используйте в качестве разделителей запятые, а не точку с запятой. Чистый способ — это запятые как разделители. См. Страницу документации http: // developer. apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html, запятые тоже используются. И хотя бы Chrome показывает ошибки в консоли, если вы используете точку с запятой. Я знаю, что это не влияет на iPad или сафари, но если вы можете сделать это чистым, почему бы и нет? 🙂

Небольшое обновление для вас: это было исправлено компанией Apple. Начиная с iOS 5 beta 1, настройка специальных возможностей Zoom больше не будет вызывать игнорирование метатега viewport .

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

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

Источник