Почему мой тег окна просмотра не будет правильно использовать ширину устройства (без увеличения) на большинстве мобильных устройств?
Я построил дюжину адаптивных сайтов и никогда не сталкивался с этой проблемой. По сути, я использую метатег для области просмотра с шириной = ширина устройства, но устройства iPhone и Android все еще масштабируются. По некоторым причинам у меня нет этой проблемы на телефонах Windows.
Вот выдержка из главы 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
- Удаление бутстрапа
- Обновление начальной загрузки до последней версии
- Изменение тега области просмотра на следующее:
- ширина = ширина устройства, начальный масштаб =1,0
- ширина = ширина устройства, начальный масштаб =1,0, масштабируемый пользователем = нет
- ширина = ширина устройства, начальный масштаб =1,0, масштабируемый пользователем =0
- ширина = ширина устройства, начальный масштаб =1,0, минимальный масштаб =1,0, максимальный масштаб =1,0
- Настройка различных свойств CSS, связанных с шириной / максимальной шириной
У меня совершенно нет идей, и я, кажется, исчерпал все, что я могу найти / попробовать через Google. Буду очень признателен за любую помощь!
5 ответов
После долгих испытаний и продолжительных поисков я нашел исправление, которое кажется очень эффективным. Другое решение, которое я видел для подобной проблемы, предложило следующее:
<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />
На первый взгляд это казалось неплохим решением, так как работало на большинстве телефонов. Это немного меня раздражало, потому что оно явно не предназначено для работы с устройством любой ширины. Этот ответ можно найти здесь:
Это решение работало на большинстве мобильных устройств, но на некоторых оно было неэффективным, вызывая неправильное увеличение изображения на дисплее.
Я считаю, что причина, по которой вышеприведенное решение неэффективно, заключается в том, что не все мобильные устройства используют базу 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">
РЕДАКТИРОВАТЬ / Обновление 2018:
Этот вопрос до сих пор встречается довольно часто, хотя проблема очень устарела. Конечно, оглядываясь назад, и после гораздо большего опыта работы с отзывчивым, я могу сказать, что как первоначальная проблема, так и решения были основаны на проблемах, возникающих из-за плохо построенных адаптивных CSS и HTML.
Хотя ответы, приведенные здесь, могут помочь будущим посетителям решить проблемы, связанные с модернизацией устаревшего кода, я настоятельно рекомендую, чтобы любая новая разработка соответствовала последним адаптивным стандартам. Если ваша разметка и CSS соответствуют, есть очень мало причин, по которым вы бы никогда не захотели использовать стандартную мета для области просмотра в отзывчивом (ниже):
<meta name="viewport" content="width=device-width, initial-scale=1">
Я просто удалил initial-scale=1, и вдруг Android на Chrome и Silk на Kindle оба работали отлично, ширина сайта соответствовала ширине экрана в обеих ориентациях.
<meta name='viewport' content='width=device-width'>
Я не проверял на IOS, но я добавлю специальный взлом IOS, если мне нужно.
У меня была проблема с начальной загрузкой 4.3.1, которая выглядела как уменьшенная версия представления планшета на мобильном устройстве с использованием этой настройки метатега:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Итак, я использовал метатег ниже, чтобы исправить на мобильном телефоне:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
теперь похоже, что bootstrap 4 должен выглядеть как кросс-устройство
Отличный материал, однако, я обнаружил, что если вы находитесь на рабочем столе, а область просмотра установлена на статическую ширину, фоны могут не отображаться на тех частях экрана, которые не отображаются при горизонтальной прокрутке.
Чтобы исправить это для неотвечающих страниц, просто добавьте минимальную ширину к телу.
body {
min-width: 960px;
}
Обратите внимание, что это в дополнение к настройке области просмотра статической ширины
<meta name=viewport content="width=960">
Просто на случай, если у некоторых других людей такая же проблема, как и у меня, моя проблема на 3/2020, похоже, заключалась в том, как я настраивал свои входы в моем запросе @Media.
Для меня мета-тег ничего не сделал.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0"
/>
Моя проблема была больше
@media only screen and (max-width: 500px) {
.input-example {
font-size: .9rem;
}
}
Как только я изменил его на:
@media only screen and (max-width: 500px) {
.input-example {
font-size: 1rem;
}
}
Все вроде нормально работает. Из того, что я читал, он должен быть либо 1rem, либо 16px.
Любой, кто ищет исправление в будущем, остается с content="width=device-width, initial-scale=0.5", НО откорректировать initial-scale =, пока оно не заработает. Я создал сайт, который отлично работал на мониторах с разным разрешением, но был абсолютно ужасен для мобильных устройств. Попробуйте 0,5, затем уменьшите.1 за раз, пока он не заработает. На двух телефонах с Android 0.3 работал отлично у меня.
Проверьте этот ответ. Короче:
<meta name="viewport" content="width=device-width; target-densityDpi=device-dpi;" />