なぜ私のiPhoneでこのメディアクエリが機能しないのですか？

Question

iPhone 6と4を使って、別のスタイルシートが適用されているかどうかを確認しました。それはしませんでした。ここに私のスタイルシートがあります：

<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css"> 
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css"> 

はい、そこにギャップがあります。そのスペースは、後でタブレット用に予約されています。何らかの理由で、mobileindex.cssがこれらの設定に適用されませんでした。私はそれを表示するために向きを2回切り替えなければならない。これは、しかし、問題が修正されています。

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css"> 
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css"> 

はiPhone 4と6のために十分ではない800ピクセルですか？どうしたの？これが起こったページはmsolonko.netです。

Answer 1

メインスタイルの下にメディアクエリを追加してから、モバイルデバイスのWebアプリケーションを確認してください。

@media screen and (min-width:768px) and (max-width:1024px) { 
    /*Your Mobile Style will be here.*/ 
} 

主なものは、あなたがiPhone6デバイスのための間違った分幅と最大幅を適用しているということです。レスポンシブデザインのiPhone6の実際のサイズは以下の通りです。

iPhone 6肖像

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /*Your Mobile Style will be here.*/ 
} 

iPhone 6の風景

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /*Your Mobile Style will be here.*/ 
}