Настройки виджета 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 отлично подстраивается под режим 640px, поэтому он работает.
В настоящее время проблема заключается в том, что пользователи могут увеличивать и уменьшать масштаб на Android и iOS, поскольку тег user-scalable не установлен.

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

Ответы

Ответ 1

Попытка рендеринга метатега просмотра в виде:

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

Ответ 2

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

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

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

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();

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

Ответ 3

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

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