Galaxy Nexus Игнорирует метатег просмотров

Я создаю приложение PhoneGap. Мое приложение разработано как интерфейс 320 пикселей. Мой тег просмотра в приложении:

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

Это работает, как и ожидалось, на моем Galaxy S2, работающем с мороженым сэндвичем. Интерфейс 320px заполняет всю ширину экрана.

Однако, при тестировании вышеуказанного кода на Galaxy Nexus, область просмотра имеет ширину 360 пикселей. Поэтому мои элементы не заполняют экран. Я попытался добавить следующую строку в файл Cordova appname.java:

this.appView.getSettings().setUseWideViewPort(true);

Однако это не влияет.

ОТВЕТЫ

Ответ 1

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Он должен изменить размер для конкретного устройства, однако я не могу проверить это.

Ответ 2

Ответы, которые я вижу, очень близки, но они игнорируют один момент, который он поднял: его интерфейс рассчитан на 320 пикселей. width = device-width сделает его пригодным для экрана, но это не гарантирует, что его интерфейс останется на 320 пикселей.

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

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>
    <div id="interfaceWrap">
        // insert interface here
    </div>
</body>
</html>

Что делает эта разметка, вы можете ограничить свой интерфейс конкретным контейнером, который вы можете установить с помощью CSS. Я бы порекомендовал что-то вроде этого:

#interfaceWrap {
    position: relative;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
}

В основном это говорит обозревателю, что независимо от того, какой метадатчик мета-тега устанавливает ширину страницы, поместите мой интерфейс в горизонтальный центр (margin-left & margin-right: auto) и сохраните его на ширину 320 пикселей (width: 320px). Вы можете добавить любую комбинацию стилей, чтобы получить то, что вы действительно ищете.

Надеюсь, это поможет!

Ответ 3

Используйте этот

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

Отметьте презентацию для настройки метатега