it-swarm.com.ru

Настройка окна просмотра 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 не установлен.

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

18
Horen

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

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

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

UPDATE: я смог исправить мою ошибку для устройств Android вместе, установив следующее:

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

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

36
Ben Sewards

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

7
pkmelee337

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

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