Question

我已根据以下决议调整了我的网站，这些是我的媒体查询。

<link rel="stylesheet" media="only screen and (min-device-width: 320px)" href="css/320/main320.css"/>
<link rel="stylesheet" media="only screen and (min-device-width: 360px)" href="css/360/main360.css"/>
<link rel="stylesheet" media="only screen and (min-device-width: 480px)" href="css/480/main480.css"/>
<link rel="stylesheet" media="only screen and (min-device-width: 640px)" href="css/640/main640.css"/>
<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="css/768/main768.css"/>
<link rel="stylesheet" media="only screen and (min-device-width : 960px)" href="css/main.css"/>

据我所知，这是为大多数设备调整网站的正确方法，而不是试图针对每个单独的设备，这是不切实际的。当我使用谷歌浏览器开发工具测试此代码时，它可以很好地工作，但是当我在真正的手机上测试它时，我会得到一个奇怪的行为。

我已经能够在iPhone 4和iPhone 6上测试这个，在这两个屏幕最小宽度仅在纵向模式下工作，当我旋转它时，即使我刷新页面它也不会更新。

我也能够在包括galaxy 5,6和LG g4在内的几款Android手机上进行测试，在这些设备上，风格在屏幕旋转时不会改变，但如果我在横向上刷新页面则更新到右边设置。

为什么会这样？

Answer 1

因为执行媒体查询时不考虑方向。您应该在查询中添加(orientation: portrait)和(orientation: landscape)。

<link rel="stylesheet" 
  media="only screen and (min-device-width: 320px) and (orientation: landscape)" 
  href="css/640/main640.css"/>

Answer 2

在device-width和landscape中，protrait可能仍然具有相同的边界，您尝试过：

and (orientation: landscape)

我知道它增加了更多的工作，但我也遇到了这个问题，并且必须在queries

方面更加具体。

媒体查询未应用于设备轮换

2 个答案: