Веб-страница начинает увеличиваться на мобильных устройствах

Я использую этот код на своей веб-странице

<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

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

Я пробовал это:

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

Но мне нужно, чтобы ширина была установлена ​​на 1000 пикселей или она выглядела неправильно.

Ответ:

<meta name="viewport" content="width=1000; user-scalable=0;" />

Ответы

Ответ 1

initial-scale=1.0 указывает браузеру установить уровень масштабирования в нормальное состояние (т.е. не увеличивать или уменьшать). Вам нужно только width=1000:

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

Ответ 2

Попробуйте следующее:

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

или

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

Ответ 3

Я также думал, что этот порт просмотра был проблемой, но после тестирования я понял, что область просмотра не была проблемой.

В моем случае проблема заключалась в CSS: фиксированная ширина или ширина: 100% вместо width: auto. Так что, если вы обнаружите, что область просмотра не является проблемой - CSS, вероятно, будет вашим следующим предположением.

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

Ответ 4

Я пробовал играть с

<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

и, похоже, мой сайт действительно получил 1000px в масштабе в масштабе 1. Однако, поскольку на экране телефона нет места для сайта, сайт продолжается за пределами области просмотра, что вызывает ощущение, что сайт увеличен.

Установка этого значения делает сайт размером 1000 пикселей широкоэкранным:

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

Это ваша проблема?

С одной стороны, 1000px звучит немного шире для мобильного сайта, но я предполагаю, что этот веб-сайт изначально не сделан для мобильных устройств?

Ответ 5

У меня была аналогичная проблема. Попробуйте следующее:

<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>

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

Ответ 6

Вы можете использовать это.

    <meta name="viewport" content="width=100%">

Ответ 7

Попробуйте, это поможет вам... Это сработало для меня

 <meta name="viewport" initial-scale=1.0 content="width=100%">

Ответ 8

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

    <meta name="viewport" content="width=device-width">