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

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

В документе head Я поставил

  <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?

Источник

3 ответа

Решение

Попробуем отобразить метатег 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 с пустой строкой к любому контенту, который застрял и не проходит через вид компоновки. Надеюсь, это поможет вам в этот раз.

Источник

Я хотел, чтобы мобильный всегда показывал веб-сайт шириной 640 пикселей из-за дизайна, который иначе сломался бы. (дизайн, который я не сделал..) Таким образом, я хотел отключить масштабирование для мобильных пользователей. Что сработало для меня, так это следующее:

- ОБНОВЛЕНО 2013-10-31

Прежде всего, вы не можете сделать это без Javascript. Вам придется проверить строку агента пользователя. Поэтому я создал mobile-viewport.js и включил скрипт непосредственно перед закрывающим тегом:

function writeViewPort() {
    var ua = navigator.userAgent;
    var viewportChanged = false;
    var scale = 0;

    if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
        var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
        // targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
        if (webkitVersion < 535) {
            viewportChanged = true;
            scale = getScaleWithScreenwidth();
            document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
        }
    }

    if (ua.indexOf("Firefox") >= 0) {
        viewportChanged = true;
        scale = (getScaleWithScreenwidth() / 2);
        document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
    }

    if (!viewportChanged) {
        document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
    }

    if (ua.indexOf("IEMobile") >= 0) {
        document.write('<meta name="MobileOptimized" content="640" />');
    }

    document.write('<meta name="HandheldFriendly" content="true"/>');
}

function getScaleWithScreenwidth() {
    var viewportWidth = 640;
    var screenWidth = window.innerWidth;
    return (screenWidth / viewportWidth);
}

writeViewPort();

Скрипт проверяет, есть ли у посетителя браузер для Android (не Chrome) или Firefox. Браузер Android не поддерживает комбинацию width=640 и user-scalable=false, а браузер Firefox имеет двойную ширину экрана по какой-то странной причине. Если у посетителя Windows Phone установлен браузер IE MobileOptimized.

Источник

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

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Источник
Другие вопросы по тегам