Некоторые мобильные веб-сайты, такие как мобильный веб-сайт BBC, не позволяют вам увеличивать масштаб главной домашней страницы на iPhone - как это достигнуто. Есть ли директива, которая должна быть включена в код HTMl или что-то в этом роде?

5
cyberbobcat 16 Апр 2009 в 15:40
Меня это интересует больше с точки зрения "почему я не могу увеличивать масштаб на некоторых сайтах?"
 – 
Andrew Bullock
16 Апр 2009 в 15:43

2 ответа

Лучший ответ

Вам просто нужно указать iPhone не позволять пользователю увеличивать масштаб с помощью метатега:

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

Это должно позволить вашей веб-странице вращаться, но не масштабировать.

10
David Wengier 16 Апр 2009 в 16:17
Но используется ли это на сайте BBC? Я только что проверил источник связанной страницы, подделав свой пользовательский агент как iPhone, и, похоже, он не использует этот метод! С другой стороны, он тоже не использует то, что я описал!
 – 
Shaun Bohannon
16 Апр 2009 в 15:57
В них включен следующий метатег, но без атрибута width = 320 - вот что у них есть:
 – 
cyberbobcat
16 Апр 2009 в 16:02
Обновлено. Нашел код, установка ширины на 320, вероятно, останавливает его правильное вращение. Я использую ширину устройства, и он вращается, но не масштабируется.
 – 
David Wengier
16 Апр 2009 в 16:20
Я попробую. Спасибо большое.
 – 
cyberbobcat
16 Апр 2009 в 16:49
Итак, вкратце, это <meta name="viewport" content="user-scalable=false" />
 – 
Paul D. Waite
17 Май 2009 в 21:52

Это потому, что ширина сайта установлена ​​на собственное разрешение дисплея iPhone. Mobile Safari на самом деле никогда не увеличивает масштаб выше 100% ни на одном сайте, например, на сайте стандартного размера (ширина 1000 пикселей) он изначально уменьшается, и вы указываете уровень масштабирования при двойном касании или с помощью жеста сжатия.

Чтобы добиться того же эффекта, используйте максимальную ширину на вашем сайте, соответствующую разрешению iPhone, равному 320 пикселей.

В CSS это будет выглядеть так:

div#wrapper
{
  width: 320px;
}
1
Shaun Bohannon 16 Апр 2009 в 15:44