Как я могу отключить мой сайт по умолчанию на мобильных телефонах?

Поэтому я хочу, чтобы пользователи могли видеть мой фон на моем веб-сайте. В настоящее время ширина моих веб-сайтов составляет 925px, и когда вы просматриваете веб-сайт в мобильном браузере (например, iPhone, Opera Mini), он увеличивается на текст, и пользователь не может видеть фон.

Я пробовал использовать тег meta viewport неудачно. Как получить мой веб-сайт по умолчанию для мобильных браузеров?

EDIT:

Вот код, который я пробовал до сих пор:

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

Ответы

Ответ 1

Я знаю, что это старый вопрос, но я все равно отвечаю, если кому-то нужен ответ.

По состоянию на сентябрь 2011 года Opera Mini по-прежнему использует версию 2.5 механизма рендеринга Presto. Viewport недоступен в Opera до Presto 2.7. (Opera Mobile, наш браузер смартфонов поддерживает окно просмотра.)

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

<meta name="viewport" content="initial-scale=0.25">

Когда вы включаете width=device-width, браузер "волшебным образом" ** находит область содержимого и настраивает ее для заполнения ширины устройства. Если вы хотите, чтобы фон заглядывал, вам нужно сжать всю страницу, чтобы она соответствовала области просмотра.

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

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

** Используя эвристику, которую разработчик браузера мог бы объяснить лучше, чем я могу.

Ответ 2

После долгих проб и ошибок я получил следующее, чтобы правильно работать на iPhone 5.0.1 и Android 2.3.6. Сайт был спроектирован для ширины 480. В зависимости от ширины вашего сайта вам нужно поиграть со значением ширины для iPhone.

<meta name="viewport" content="width=520, target-densitydpi=high-dpi" />
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Ответ 3

Я удивлен, что meta viewport не работает для вас (на Mobile Safari). Можете ли вы опубликовать то, что вы использовали?

ОБНОВЛЕНИЕ. Это обычно работает для меня... попробуйте:

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

Если это сработает, вы можете начать играть со значениями шкалы, чтобы пользователи могли масштабироваться, если они захотят, и на сколько.