it-swarm.com.ru

Как я могу заставить сайт масштабироваться, чтобы исправить для мобильных устройств (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">   
36
Zach Lysobey

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

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

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

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

48
Gregg B

попробуйте использовать разные 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.

Здесь это пример.

4
alinoz

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

2
Jerry

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

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

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

0
Web Guy