0

私のウェブサイトの 2 つのバージョンを作成したいと考えています。1 つはデスクトップ (PC とラップトップ) を対象とし、もう 1 つはモバイル デバイス (スマートフォンとタブレット) を対象としています。私はそれをググって、メディアクエリに関するいくつかの記事を読みました。だから私はこのメディアクエリを私のデザインに入れました（主にこの参照に基づいています）：

/* For mobile and smartphones */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*style*/
}

/* For tablet */ 
@media only screen and (min-device-width : 768px) {
/*style*/ 
}

/* For iPhones */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and
 (min-device-pixel-ratio : 1.5) { 
/*style*/ 
}

いくつかのデバイスでテストしました。モバイルとスマートフォンではうまく動作しますが (xperia、samsung galaxy mini、nexus 4 などのいくつかのスマートフォンで試しました)、どうやらタブレットでは動作しませんでした (nexus 7 と Galaxy タブで試しました)。タブレットで Web サイトを開くと、モバイル バージョンではなくデスクトップ バージョンが表示され続けます。どのようにそれが起こるのですか？ありがとう ：-）

4

1 に答える 1

0

あなたは持っていましたか：

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

ウェブサイトのヘッダー部分に？このコードは、タブレットのズーム効果を無効にし、おそらくあなたのメディアクエリが機能するでしょう:)

お知らせ下さい！

于 2013-01-24T08:44:21.937 に答える