meta viewport device-width: неправильная ширина small в Opera Mobile 9.7 (работает 10)

В моем текущем мобильном веб-проекте я использую метатег 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

Когда я жестко кодирую 480 вместо «ширины устройства», все работает правильно. То же самое и для ландшафтного режима:

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

Есть ли обходной путь для этого?

Привет


opera mobile-website windows-mobile
person Markus Wolters    schedule 29.12.2009    source источник
comment
у меня htc hd2, но я всегда получаю 960 по ширине! Я пробовал window.screen.width и всегда получаю 480! а высота всегда 800 не смотря ни на что, это баг ?!   -  person Ayyash    schedule 31.07.2010
comment
сегодня я попробовал: document.body.offsetWidth при установке метатега области просмотра на 240, я получил 236! yepeee, но я все еще не могу получить точное значение высоты, если страница не пуста   -  person Ayyash    schedule 31.07.2010
comment
что-то новое, что я пробовал сегодня, в C # Request.Browser.ScreenPixelsWidth.ToString () возвращает 640! и я подумал, что могу использовать его, чтобы различать определенные экраны, но нет!   -  person Ayyash    schedule 01.08.2010
comment
Вы добавили в свой проект файл mobile.browser? Кроме того, существует новая альтернатива Mobile .NET MVC, которая заменяет старые мобильные инициативы от Microsoft ...   -  person Jan de Jager    schedule 02.09.2010
comment
Ян, не могли бы вы дать мне ссылку на эту альтернативу .NET MVC, так как я все равно интенсивно использую MVC прямо сейчас.   -  person Markus Wolters    schedule 06.12.2010

Ответы (5)


arrow_upward
9
arrow_downward

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

iPhone3: физический 320x480px / CSS 320x480px => ratio = 1, easy.

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.

person darma    schedule 22.12.2010

arrow_upward
3
arrow_downward

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

person tagawa    schedule 17.09.2010

arrow_upward
2
arrow_downward

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

person ghandi    schedule 14.03.2011

arrow_upward
0
arrow_downward

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

Works on BB and indicates you have designed code for small screen

person Ian    schedule 16.08.2010
comment
Совершенно уверен, что вы имели в виду HandheldFriendly. - person Jordan Reiter; 10.12.2010

arrow_upward
0
arrow_downward

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

person cofiem    schedule 16.09.2010
comment
PPK - доказательство того, что разработка мобильных устройств - это эпическая боль прямо сейчас :) - person Jethro Larson; 08.11.2010