Question

当我在移动设备中更改我的网页从纵向到横向的方向时，它正确显示。但是，再次从横向更改为纵向对齐是不正确的。

我正在使用这样的元标记：

<meta name="viewport" content="width=device-width, maximum-scale=2.0, initial-scale=1, minimum-scale=1.0, user-scalable=yes, shrink-to-fit=no">

我发现在应用横向模式时，宽度在元标记中更改为width = device-height。但是，如果我转向纵向意味着宽度不会更改为元标记中的width = device-width，则它仍然存在于width = device-height中。如何解决这个问题？

Answer 1

我认为您应该链接2个样式表，一个用于纵向，一个用于横向或使用方向定义您的样式和媒体查询

在下面的示例中，我已经包含了两者，但是其中之一都可以。

e.g。

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" media="all and (orientation:portrait)"src="portrait.css">
<!---portrait css contains @charset "utf-8";
img{width:400px;}--->
<link rel="stylesheet" media="all and (orientation:landscape)" src="landscape.css">
<!---landscape.css contains @charset "utf-8";
img{width:600px;}---->
<title>Simple orientation trial (view on device)</title>
<style>
img{max-width:400px;}

@media all and (orientation:portrait) {
    img{max-width:400px;}
}
@media all and (orientation:landscape) {
    img{max-width:600px;}

}
</style>
</head>
<img src="http://www.rachelgallen.com/images/daisies.jpg">
<body>
</body>
</html>

Answer 2

尝试在某些特殊情况下（例如字体大小等）给出百分比百分比，您可以使用EM或PX。

更改设备方向时CSS失败

2 个答案: