Получите мой веб-сайт по умолчанию на мобильных телефонах.

Question

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

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

РЕДАКТИРОВАТЬ:

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

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

Answer 1

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

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

Попробуйте:

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

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

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

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

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

Answer 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" /> 

Answer 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" />

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