2

私は自分のウェブサイトを再設計している最中であり、レスポンシブレイアウトを試してみることにしました。私はCSS3メディアクエリを初めて使用し、スマートフォンでサイトを意図したとおりに動作させる方法を理解できません。

このページには現在、次のビューポートメタタグがあります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTMLにこれがある場合とない場合の違いがわからないため、何をするのかわかりませんが、どういうわけか便利だと言われました。

スタイルシートは、幅R <640px、640px <= R <960px、および960px <= Rをターゲットにすることになっています。レイアウトは、それぞれ幅320px、640px、および960pxになります。

私が直面している問題は、私のスマートフォン（そしておそらくすべての最新の高ピクセル密度ハンドヘルドデバイス）にあります。私のスマートフォンの物理解像度は480x800pxですが、横向きモードでは533pxの幅が報告されます（ピクセル比は1.5、800 / 1.5 = 533.33なので、これは期待値だと思います）。533 <640なので、表示されるレイアウトは最も狭いレイアウトである320pxです。中型のものはスマートフォンで見栄えがすることを知っているので、それを使用したいと思います。1：1ピクセル比のデスクトップブラウザで機能する現在のルールに違反することなく、スマートフォンに640pxのレイアウトを横向きモードで表示させるにはどうすればよいですか？

各レイアウト（それぞれ320、640、960）の現在のメディアクエリは次のとおりです。

@media only screen and (max-width: 639px)

@media only screen and (min-width: 640px) and (max-width: 959px)

@media only screen and (min-width: 960px)
4

2 に答える 2

3

この質問/回答が役立つ場合があります: iPhone の Safari 用の Android の <meta name='viewport' content='target-densitydpi=device-dpi'> に相当するものはありますか? これは、次の非常に役立つ記事を指しています: http://davidbcalhoun.com/2010/viewport-metatag

<meta name="viewport" content="target-densitydpi=device-dpi" />

これは Android に適した解決策のように思われますが、iOS デバイスでは機能しない可能性があることに注意してください (Mac や iPhone を手元に用意して確認する必要はありません)。

于 2012-05-10T10:15:47.383 に答える
1

私はむしろメディアクエリを使用したいと思います:

    @media only screen and (max-width: 639px) and (-Webkit-min-device-pixel-ratio: 1.5), 
    @media only screen and (max-width: 639px) and (-moz-min-device-pixel-ratio: 1.5),
    @media only screen and (max-width: 639px) and (-o-min-device-pixel-ratio: 3/2),
    @media only screen and (max-width: 639px) and (min-device-pixel-ratio: 1.5),
    @media only screen and (min-width: 640px) and (max-width: 959px)
于 2013-01-08T14:06:03.857 に答える