2

私はレイアウトを持っています：

モバイルレイアウト

私が直面している問題は、幅が広すぎることです。最大幅640pxにする必要があります。

最大幅を定義する CSS を設定する方法は知っていますが、レイアウトが 640px に制限されており、スケーリングされていません。だから私は空のスペースが残っています。

スクリーンショットは高解像度の Nexus 7 のものです。レイアウトを最大 640px に設定し、画面サイズに合わせて拡大したいと考えています。

私は試した：

<meta name="viewport" content="width=640, maximum-scale=2, minimum-scale=1">

そして、それは完璧に機能し、640px 幅のレイアウトが画面に合わせて拡大縮小されました。ただし、iPhone 5 のような解像度の小さいデバイスでは、640px 幅のビューポートが強制的に表示されるため、見栄えが悪くなります。

モバイル画面の解像度に応じて、最小 320 - 最大 640 ピクセル幅のレイアウトを作成し、空のスペースを残す代わりに画面にスケーリングする方法はありますか?

次に例を示します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=200">
<style>
body {
background: green;
width: 200px;
}
</style>
</head>
<body>
<div style="background:red; width: 200px; height: 200px;">
</div>
</body>
</html>

次のようになります: http://d.pr/i/LOZ7

画面いっぱいに赤くするにはどうすればいいですか？水平方向に塗りつぶされるように拡大するにはどうすればよいですか?

4

3 に答える 3

3

viewport`device-width' に を使用できます。つまり、次のようになります。

 <meta name="viewport" content="width=device-width">

さらに、最小幅を含めます。次に、メディア クエリを使用して、幅が より大きいデバイスの表示方法を調整します640px。

さらに、コンテンツ要素の幅をパーセンテージで指定してください。こうすることで、コンテンツはブラウザーによって拡大縮小され、利用可能なスペースを埋めることができます。

于 2013-08-02T16:32:04.507 に答える
2

メディア クエリを使用して、特定のデバイスをターゲットにします。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2013-08-02T16:28:15.863 に答える
1

これを使用する必要があります：

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

これにより、実際に幅を宣言しなくても、レイアウトが自動的に調整されます。

于 2013-08-02T16:46:39.560 に答える