複数のデバイスをサポートする固定幅のモバイルウェブページ

Question

モバイルページのプロジェクトの後半で問題が発生しました。クライアントはiPhoneのみをサポートするのではなく、iPhoneと様々なアンドロイドモバイルデバイスの両方をサポートするように求めました。

モバイルページは、HTMLページ幅640pxのXHTMLで書かれており、その要素は幅を持っています（例： 500px、％20 ...ページは次のビューポートでiPhoneのSafariで素晴らしいように見えますが、他のデバイスのブラウザでは醜いです。

<meta name="viewport" content="user-scalable=no, width=device-width, target-densityDpi=device-dpi,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5;"> 

私はビューポートで再生することで問題を解決しようとしていましたが、長い間苦労していました。私のアイデアは初期スケールについてですが、誰かがこの値をdevice-width/640に動的に割り当てる方法を提案できますか？

おかげ

Answer 1

あなただけ使用する必要があります。

<meta name="viewport" content="width=320"> 

なぜ320？ iPhone 4の画面サイズは縦640ピクセルですが、デスクトップ画面と比べて2倍高い有効dpiを持つ「網膜」ディスプレイです。したがって、デバイスの幅が640/2 = 320 CSS pxであることを意味するwindow.devicePixelRatioが2です。つまり、各CSS pxは物理デバイスピクセルの2x2平方を占めます（詳細はthis article on QuirksModeを参照）。

例えば、あなたはfont-size：14pxを設定することができ、そのテキストの知覚されるサイズは、iPhone 3Gで14pxのテキストを表示した場合と同じになるため（実際に表示されるため） iPhone 4の28個の物理デバイスピクセルを使用して、より高いdpiを補正します）。代わりにあなたのfont-size：14pxのテキストが14の物理的なデバイスピクセルだけを使って表示されていた場合、iPhone 4では小さく見えます（iPhone 3Gの半分のサイズ）。

ここでは、サイトが640pxではなく320pxの幅で設計されている必要があります。しかし、これはすでに本当だった.iOSはtarget-densityDpi = device-dpiを決してサポートしていないので、width = device-widthを置くことによって、あなたは効果的にwidth = 320を入れていた。

なぜwidth = device-widthではなくwidth = 320を使用するのですか？あなたのサイトは固定幅のレイアウトだと言われているので、width = device-widthを指定すると、異なるサイズのデバイスに表示されていると見栄えが悪くなる可能性があります。たとえば、 width = 320の場合、ブラウザはデバイスの画面幅に合わせて拡大します（したがって、多少拡大して見えるかもしれませんが、白いマージンよりも良いでしょう）。

しかし、これをストップギャップ測定と見なしてください：width = device-widthのままにし、固定幅ではなく柔軟にするようにサイト設計を変更するほうがはるかに良いでしょう。あなたのdivと画像の幅の代わりに：320px）。詳細については、http://www.html5rocks.com/en/mobile/responsivedesign/

を参照してください。ユーザーが拡大/縮小できないようにするには、「user-scalable = no」という用語を使用できますが、アクセシビリティ上の理由から、これを省略するには、手動でピンチズームジェスチャを扱うモバイルmaps.google.comのようなものを設計していない限り、ブラウザを干渉させたくない場合を除きます。