0

私はレスポンシブサイトに取り組んできました。Chrome 開発者ツールを使用して画面サイズを 320px にオーバーライドし、メディア クエリを使用して CSS を変更しています。これは私が使用したメディアクエリです:

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

私のブラウザでは、これは正しく機能し、次のようになります (ビューポートを 320 x 480px に設定):

ここに画像の説明を入力

ただし、iPhone 5 で表示すると、これが結果であり、全幅バージョンと同じです] 2 :

ここに画像の説明を入力

メディア クエリの完全な CSSは、ここで確認できます。

4

1 に答える 1

4

これを追加

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

あなたの<head>タグで。

これは、Web サイトがデフォルトの幅ではなく、デバイスの幅に合わせて拡大縮小されることを意味します。

于 2013-04-15T13:19:47.297 に答える