我在使用 Nexus 7 时遇到了一个关于 CSS 媒体查询的非常奇怪的问题。媒体查询在方向更改时运行良好,但如果我们将设备保持在横向模式并使其空闲一段时间,然后在方向更改时,视口将采用横向模式的样式而不是纵向模式样式。
这是我写的代码
<!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 颜色保持绿色设备闲置一段时间后查看。
请帮我解决这种情况。