Метатег HTML5 Viewport не работает на телефоне Android в портретном режиме

Question

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

Для поворота портретного телефона требуется "initial-scale = 0.62", чтобы подогнать страницу к окну просмотра.И все же «initial-scale = 1» отлично работает в ландшафтном режиме.Я использую:

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

Я ожидаю, что браузер будет масштабировать страницу до области просмотра браузера, а не от необходимости увеличивать масштаб.Окно просмотра моего телефона 360 и 640, портретное и альбомное.Может ли это быть связано с тем, что страница не имеет размера 360px в портретной ориентации, а масштаб 1 показывает страницу с истинной шириной?

Я только что проверил страницу в Firefox и, изменив размер окна браузера, я смог заставить страницу настроить размер объектов до 466px, прежде чем она больше не будет уменьшаться.Я проверяю размер области просмотра, используя https://viewportsizes.com/mine/

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

Может кто-нибудь объяснить, как правильно масштабировать страницу?

Answer 1

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

Как показано ниже:

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

Или вы также можете указать ширину:

 <meta name="viewport" content="width=360, maximum-scale=1"/>

Полагаю, что нижеприведенное работает как для iPhone, так и для iPad *

 <meta name="viewport" content="width=720, maximum-scale=1.0" />

или последняя попытка

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

Кроме того, существуют также медиа-запросы CSS3.