CSS メディア クエリに関して、Nexus 7 で非常に奇妙な問題に直面しています。メディア クエリは向きの変更時に正常に実行されますが、デバイスをランドスケープ モードのままにしてしばらくアイドル状態にすると、向きが変更されると、ビューポートはポートレート モードのスタイリングではなくランドスケープ モードのスタイリングを取得します。
ここに私が書いたコードがあります
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
css ファイルでは、スタイリングは次のようになります。
div {height: 500px; width: 500px;}
@media only screen and (min-width:480px) {
div {background: red;}
}
@media only screen and (min-width:768px) {
div {background: green;}
}
Ipad、Iphone、S3 などの他のデバイスの場合、これらのデバイスがアイドル状態に保たれ、向きがそれぞれのビューポート スタイルを取得しても、メディア クエリは正常に実行されますが、Nexus 7 では、向きが横向きから縦向きに変わっても div の色は緑色のままです。デバイスがしばらくアイドル状態になった後に表示されます。
この状況で私を助けてください。