Почему мой тег viewport должным образом не использует ширину устройства (без увеличения) на большинстве мобильных устройств?

Я построил десяток чувствительных сайтов и никогда не испытывал этой проблемы. В основном, я использую метатег для видового экрана с шириной = ширина устройства, но устройства iPhone и Android по-прежнему масштабируются. По какой-то причине у меня нет этой проблемы на телефонах Windows.Почему мой тег viewport должным образом не использует ширину устройства (без увеличения) на большинстве мобильных устройств?

Вот отрывок из головы HTML:

<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Вот HTML для основных оберток (обратите внимание на внешний DIV добавляется от jquery.mobile:

<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" > 
    <div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;"> 
     <div class="container"> 
     </div> 
    </div> 
</body>

И вот главная обложка CSS:

html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; } 
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;} 

body > div {width: 100%; height: auto; } 
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}

Bootstrap также загружается до таблицы стилей.

Я попробовал много разных вещей, уже в том числе:

Удаление jquery.mobile
Удаление начальной загрузки
Updating начальной загрузки последней версии
Изменение видового экрана тег следующее:
- width = device-width, initial-scale = 1.0
- width = device -width, initial-scale = 1.0, user-scalable = no
- width = device-width, initial-scale = 1.0, user-scalable = 0
- width = device-width, initial-scale = 1.0, minimum -scale = 1,0, максимальный масштаб = 1,0
Настройка различных CSS свойства, относящиеся к ширине/макс ширина

Я полностью из идей и, похоже, исчерпала ничего нового я могу найти/попробуйте через google. Я был бы очень признателен за любую помощь, которую вы можете предоставить!

источник

2014-02-12 Lawrence Johnson

После долгих испытаний и продолжения поиска я придумал исправление, которое кажется очень эффективным. Другое решение, которое я видел в аналогичной проблемы предложили следующее:

<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />

Это, во-первых, казалось, достойное решение, как он работал на большинстве телефонов. Это немного исказило меня, потому что оно явно не предназначено специально для работы с любой шириной устройства. Этот ответ можно найти здесь:

Android viewport setting "user-scalable=no" breaks width/zoom level of viewport

Это решение работает на большинстве мобильных устройств, но на некоторых это оказалось неэффективным в результате чего дисплей использует неправильный масштаб.

Я верю, что причина, по которой решение выше неэффективно, состоит в том, что не все мобильные устройства используют базовое 320 для масштабирования. Поэтому, когда ширина устройства не работает, это приводит к тому, что ограничения несовместимы.

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

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

Я считаю, что разница в этом теге является то, что он говорит устройству использовать это но затем добавляет масштабный коэффициент, который говорит ему, чтобы он не увеличивался настолько, насколько это было бы обычно.

Я никогда не мог найти какие-либо корректировки CSS, которые решили проблему, и я приветствую любые другие ответы в будущем, которые могут добавить дополнительные разъяснения к проблеме/решению.

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

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

источник

2014-02-15 20:31:06

Проблема с этим решением заключается в том, что пользователь больше не может увеличивать масштаб ('user-scalable = no;'). –

Что мне помогло: – trickydiddy

Проверка this answer. Короче говоря:

<meta name="viewport" content="width=device-width; target-densityDpi=device-dpi;" />

источник

2014-08-26 09:15:33

Great Stuff, однако, я обнаружил, что если вы находитесь на рабочем столе и видовой экран устанавливается на статическую ширину фоны могут не оказать на части экрана не отображается, когда горизонтальная прокрутки.

Чтобы исправить это для нечувствительных страниц, просто добавьте минимальную ширину к телу.

body { 
    min-width: 960px; 
}

Заметим, что это в дополнение к настройке области просмотра статической ширины

<meta name=viewport content="width=960">

источник

2015-12-02 18:49:53 developernator

Почему мой тег viewport должным образом не использует ширину устройства (без увеличения) на большинстве мобильных устройств?

ответ

Смежные вопросы