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

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 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.

Здесь является примером.

Answer 3

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

Answer 4

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

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

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