14

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

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

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

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

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

ご挨拶

4

5 に答える 5

9

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

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

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

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

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

于 2010-12-22T22:42:06.940 に答える
3

これは古い質問ですが、誰かの助けになるかもしれません。この記事には、Opera Mobile 9.7 でのビューポート メタ タグのサポートに関するセクションがあり ます: http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/、最小スケールと最大スケールはサポートされていませんが、幅、高さ、および初期スケールはサポートされている必要があります。うまく機能しない場合は、いつでも CSS メディア クエリを使用してみてください。同じ記事に説明と例があります。

于 2010-09-17T15:00:20.493 に答える
2

見てみましょう: http://www.quirksmode.org/mobile/viewports2.html 痛みの世界に入ります :)

于 2011-03-14T12:45:59.243 に答える
0

PPK のQuirksmode.orgモバイル サイトをご覧ください。大量の情報と互換性表！

于 2010-09-16T23:32:30.140 に答える
0

HandleFriendly タグを試しましたか?

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

于 2010-08-16T09:50:58.443 に答える