web-dev-qa-db-ja.com

meta "viewport" device-width：Wrong width small on Opera Mobile 9.7（10 works）

現在のモバイルWebプロジェクトでは、メタ「ビューポート」タグを使用して、デバイスの幅に対して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モバイル、iPhone Safari、さらにはOpera 10ベータ版でも機能しますが、Opera 9.7では機能しません、デフォルトでHTCHD2にインストールされます。HTCHD2のデバイスサイズは480x800であるため、ポートレートモードではビューポートの幅は480になります。ただし、どうやらOpera mobile 9.7（およびおそらく9.5） too）設定が間違っているため、その後すべてが少し拡大されます。短いjavascriptスニペットを使用して、実際のウィンドウサイズを調べました。

$（window）.width（）-> 274を返します
window.innerWidth-> 480を返します

「デバイス幅」の代わりに480をハードコーディングすると、すべてが正しく機能します。ランドスケープモードについても同じです。

$（window）.width（）-> 457を返します
window.innerWidth-> 800を返します

これに対する回避策はありますか？

ご挨拶

windows-mobileoperamobile-website
14
Markus Wolters

私はこれに少し遅れていますが：ビューポートメタタグは、画面の物理的なピクセルではなく、CSSピクセルと見なす必要があります。そして、それらの間の比率は、デバイスの物理的なピクセル密度に関してかなり異なる可能性があります。

iPhone3：物理320x480px/CSS 320x480px =>比率= 1、簡単。

iPhone4：物理的な640x960px/CSS 320x480px =>比率= 2、それはApple 3用に最適化されたサイトをまったく同じように動作させるためにiPhone4でピクセルを2倍小さくしたときに行うことを考えました4.4。

HTC Desire HD：物理的な480x800px/CSS 320x533px =>比率= 1.5これは、おそらくHTCHD2で経験しているものに近いものです。

ビューポートにwidth = device-width値を使用する場合、デザインに固定幅を設定するべきではないと思いますが、ほとんどの（最近の）モバイルデバイスではCSSを念頭に置いて、幅を％で使用することをお勧めします。全幅は、1.0のスケールで約320px（ポートレート）または500px（ランドスケープ）になります。

9
darma

これは古い質問ですが、誰かに役立つかもしれません。この記事には、Opera Mobile 9.7： http://dev.opera.com/articles/view/opera-mobile-）のビューポートメタタグのサポートに関するセクションがあります。 9-7-features-standards / 属性user-scalable、minimum-scale、maximum-scaleはサポートされていませんが、width、height、initial-scaleはサポートされているはずです。うまく機能しない場合は、いつでもCSSを使用してみてください。メディアクエリ。同じ記事に説明と例があります。

3
tagawa

見てください： http://www.quirksmode.org/mobile/viewports2.html 痛みの世界に入る:)

2
ghandi

PPKの Quirksmode.org モバイルサイトをご覧ください。情報の山と互換性テーブル！

0
cofiem

HandleFriendlyタグを試しましたか？

BBで動作し、小さな画面用のコードを設計したことを示します

0
Ian