Meta "viewport" device-width: Неверная ширина маленькая на Opera Mobile 9.7 (10 работ)

В моем текущем мобильном веб-проекте я использую тег meta "viewport", чтобы указать мобильному браузеру использовать шкалу 1:1 с шириной устройств:

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

Это работает на IE mobile, iPhone Safari и даже на бета-версии Opera 10, но не на Opera 9.7, который по умолчанию установлен на HTC HD2. HTC HD2 получил размеры устройства 480x800, поэтому в режиме просмотра в окне просмотра должно быть 480 пикселей. Но, похоже, Opera Mobile 9.7 (и, возможно, 9,5 тоже) устанавливает неправильную ширину, поэтому после этого все немного уменьшилось. Я использовал короткий фрагмент javascript для проверки фактического размера окна:

$(window).width() → возвращает 274
window.innerWidth → возвращает 480

Когда я hardcode 480 вместо "width-device" все работает правильно. То же и для ландшафтного режима:

$(window).width() → возвращает 457
window.innerWidth → возвращает 800

Есть ли какое-либо обходное решение для этого?

Привет

Ответ 1

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

iPhone3: физическое 320x480px/CSS 320x480px = > ratio = 1, легко.

iPhone4: физическое 640x960px/CSS 320x480px = > ratio = 2, что Apple подумала о том, чтобы сделать, когда они сделали пиксели в два раза меньше в iPhone4, чтобы сайты, оптимизированные для 3, работали точно так же на 4.

HTC Desire HD: физическое 480x800px/CSS 320x533px = > ratio = 1.5, что, вероятно, что-то похожее на то, что вы испытываете с HTC HD2.

если вы используете значение width = device-width для окна просмотра, я полагаю, вы не должны иметь фиксированную ширину в своем дизайне, но лучше использовать ширину в%, имея в виду, что в большинстве (последних) мобильных устройства ваша общая ширина CSS будет где-то около 320 пикселей (портрет) или 500 пикселей (пейзаж) в масштабе 1,0.

Ответ 2

Я знаю, что это старый вопрос, но он может помочь кому-то. В этой статье есть раздел о поддержке метатега viewport в Opera Mobile 9.7: http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/ Атрибуты, масштабируемые пользователем, минимальная шкала и максимальная шкала не поддерживаются, но ширина, высота и начальная шкала должны быть. Если он не работает, вы всегда можете попробовать использовать мультимедийные запросы CSS. Там описание и пример в той же статье.

Ответ 3

взгляните на: http://www.quirksmode.org/mobile/viewports2.html вступая в мир боли:)

Ответ 4

Вы пробовали тег HandleFriendly?

Работает на BB и указывает, что вы разработали код для небольшого экрана

Ответ 5

Посмотрите на сайт PPK Quirksmode.org. Кучи информации, плюс таблицы совместимости!