Настройка окна просмотра Android «user-scalable=no» ломает ширину/уровень масштабирования области просмотра




iphone mobile (2)

Я работаю над веб-приложением шириной 640 пикселей.

В заголовке документа я установил

  <meta name="viewport" content = "width=640, user-scalable=no" />

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

Когда я изменяю настройку области просмотра, чтобы пропустить user-scalable тег, как это:

<meta name="viewport" content="width=640" />

браузер Android хорошо настраивается на 640 пикселей - так что он работает.
Однако теперь проблема заключается в том, что пользователи могут увеличивать и уменьшать масштаб на Android и iOS, поскольку user-scalable тег не установлен.

Как я могу запретить масштабирование и в то же время установить ширину области просмотра на 640 пикселей на Android?


Попробуем отобразить метатег viewport следующим образом:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

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

ОБНОВЛЕНИЕ : я смог исправить мою ошибку для устройств Android все вместе, установив ниже:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

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


У меня была такая же ситуация: если вы хотите, чтобы содержимое всегда соответствовало ширине экрана, не позволяя пользователю увеличивать / уменьшать масштаб, используйте следующие метатеги (это будет работать независимо от того, какую ширину вы предоставляете)

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />






viewport