Question

我正面临一个关于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颜色保持绿色，当方向从设备闲置一段时间后，将视图设置为纵向视图。

请帮我解决这个问题。

Answer 1

尝试更新您的视口元标记属性<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

当设备在一些空闲时间之后从横向到纵向定向时，Nexus 7采用横向模式的样式

1 个答案: