Проблема с медиа-запросами в jQuery Mobile

Мы работаем над приложением, используя jQuery Mobile Framework. До сих пор приложение работало очень хорошо, и теперь мы думаем об использовании условных сценариев CSS «медиа-запросов» для разных размеров окна браузера.

Наша идея заключается в том, что когда кто-то получает доступ к нашему приложению из мобильного браузера, такого как iPhone/Android/Windows phone, он может просматривать изображение в полную ширину и в полную высоту. Но когда кто-то получает доступ из обычного настольного браузера и его ширина превышает 800 пикселей, нам нужно изменить размер нашего приложения как по ширине, так и по высоте.

Проблема в том, что мы хотим установить окно приложения с измененным размером поверх фона iPhone, и текущее положение фона фиксировано. Я пробовал тысячи раз изменять ширину и высоту и мог изменять ширину, но не мог изменять высоту. Кроме того, мне нужно изменить положение наших приложений на фоне.

Может ли кто-нибудь предложить мне, как изменить высоту окна JQM?

Ждем экспертного мнения.


media-queries jquery-mobile
person Mahbub Alam Khan    schedule 07.03.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Проверьте, не связано ли это с настройкой окна просмотра. Я думаю, нам нужно больше деталей. Это немного сбивает с толку то, что вы на самом деле спрашиваете.

person imaginethepoet    schedule 07.03.2012

arrow_upward
0
arrow_downward

Я думаю, что Viewpoint будет обрабатывать ширину, а контент должен обрабатывать высоту страницы. Я думаю, что есть значение по умолчанию для высоты.

Метатег области просмотра
Обратите внимание, что в заголовке есть метатег области просмотра, который указывает, как браузер должен отображать уровень масштабирования и размеры страницы. Если это не установлено, многие мобильные браузеры будут использовать «виртуальную» ширину страницы около 900 пикселей, чтобы она хорошо работала с существующими настольными сайтами, но экраны могут выглядеть уменьшенными и слишком широкими. Установив для атрибутов области просмотра значения content="width=device-width, initial-scale=1", ширина будет равна ширине экрана устройства в пикселях.

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

Эти настройки не отключают возможность пользователя масштабировать страницы, что хорошо с точки зрения доступности. В iOS есть небольшая проблема, из-за которой ширина не устанавливается должным образом при изменении ориентации с этими настройками области просмотра, но мы надеемся, что это будет исправлено в будущем выпуске. Вы можете установить другие значения области просмотра, чтобы отключить масштабирование, если это необходимо, поскольку это часть содержимого вашей страницы, а не библиотеки.

Также есть опция глобальной конфигурацииgradeA, но не уверен, что это поможет:

gradeA
функция, возвращающая логическое значение, по умолчанию: функция, возвращающая значение $.support.mediaquery Любые условия поддержки, которые должны быть выполнены для продолжения.

jQM предлагает Media Helpers, но он устарел, но вы все равно можете загрузить его и использовать самостоятельно.

Они предлагают использовать response.js, разработанный Скоттом Джелом (член команды jQM)

person Phill Pafford    schedule 07.03.2012