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

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

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

ИЗМЕНИТЬ:

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

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

iphone html css opera-mini
person Kredns    schedule 30.08.2010    source источник

Ответы (3)


arrow_upward
19
arrow_downward

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

По состоянию на сентябрь 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> также будет работать, но обычно вы будете видеть меньше фонового изображения.

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

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

person webinista    schedule 21.09.2011

arrow_upward
5
arrow_downward

После долгих проб и ошибок у меня получилось правильно работать на 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" />
person Nomad77    schedule 20.05.2012
comment
Пришлось поставить более большую ширину (1300), чтобы заработало. +1, потому что я в отчаянии. - person Francisco Corrales Morales; 20.02.2014

arrow_upward
1
arrow_downward

Я удивлен, что 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" />

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

person donohoe    schedule 30.08.2010
comment
Это решение заставляет браузер увеличивать масштаб, а не уменьшать его, как задается вопрос. - person Steve; 13.03.2014
comment
Нет, Стив, он пытается заставить браузер учитывать фактическую ширину страницы (так что он не увеличивается и не уменьшается). Также имейте в виду, что это был рабочий ответ еще в 2010 году. Теперь MobileSafari может вести себя по-другому. - person donohoe; 13.03.2014