Как я могу заставить сайт масштабироваться для исправления для мобильных устройств (Iphone android..)

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

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

Я пробовал с и без следующего кода в голове, но без видимого эффекта.

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

<!--  I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">

Ответ 1

Использование документов здесь: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

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

<meta name="viewport" content="user-scalable = yes">

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

Ответ 2

попробуйте использовать разные css и переключить их (на стороне сервера) на основе настроек клиента. Например, iPhone будет идентифицировать себя как:

 HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
 AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

В зависимости от того, какой язык скриптинга вы имеете на стороне сервера, вы можете изменить css.

Здесь приведен пример.

Ответ 3

Тег viewport контролирует, какая часть страницы будет отображаться на начальном этапе, но сама страница по-прежнему должна быть рассчитана на размер экрана 320x460, который будет отображаться на iPhone без масштабирования. Если вы не хотите изменять структуру страницы, видовое окно позволяет вам контролировать, как будет отображаться страница.

Ответ 4

Избавьтесь от width=1024, просто введите

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

И, очистите кеш браузера телефона. Возможно, придется даже выключить и снова включить.