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

17

Я работаю над веб-приложением шириной 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?

    
задан Horen 04.10.2012 в 11:04
источник
  • это ошибка браузера. я пробовал все, ничего не работало. наконец, я удалил user-scalable = не только из этого браузера. он отлично работает. –  Barlas Apaydin 25.07.2013 в 11:40

3 ответа

36

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

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

    
ответ дан Ben Sewards 08.10.2012 в 18:25
  • , по-видимому, при настройке начального уровня на 1.0 он настраивается на 320 пикселей, так что страница загружается с увеличением (ширина моей страницы составляет 640 пикселей). Установка начального уровня на 0,5 работает, а также 640px. параметр user-scalable = no не позволяет использовать Android независимо от того, пользуюсь ли я, или; - так еще нет решения :( –  Horen 09.10.2012 в 11:37
  • Я пробовал <meta name="viewport" content="width = 640, user-scaleable = no" /> и <meta name="viewport" content="width = 640; user-scalable = no" / > оба браузера Android загружают страницу, увеличенную изначально –  Horen 09.10.2012 в 16:42
  • круто, это похоже на работу - поэтому, чтобы понять это: user-scalable = no не требуется, потому что начальный и максимальный масштаб установлен на один и тот же номер? –  Horen 09.10.2012 в 16:57
  • точно. мы можем заблокировать видимый макет пользователя таким образом :) –  Ben Sewards 09.10.2012 в 17:10
  • Это говорит о том, что вы должны использовать запятые для разделения нескольких свойств, а не точек с запятой. –  nickgrim 07.02.2013 в 13:57
Показать остальные комментарии
7

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

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

    
ответ дан pkmelee337 17.10.2013 в 16:52
  • О, спасибо за это. Мне пришлось немного настроить его для работы на моем конкретном сайте, но теперь я получаю сайт, который точно подходит браузеру, даже на старых устройствах Android. –  jeffedsell 30.01.2014 в 18:38
0

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

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
ответ дан Nitin 09.10.2012 в 07:33
  • , по-видимому, при установке начального масштаба в 1.0 он настраивается на 320 пикселей, так что страница загружается с увеличением (ширина моей страницы составляет 640 пикселей). Установка начального уровня на 0,5 работает, а также 640px. параметр user-scalable = no не позволяет использовать Android независимо от того, пользуюсь ли я, или; - так еще нет решения :( –  Horen 09.10.2012 в 11:35