css - 媒体查询不适用于设备旋转

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"/>

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

我已经能够在 iPhone 4 和 iPhone 6 上对此进行测试，在它们上屏幕最小宽度仅适用于纵向模式，当我旋转它们时即使我刷新页面也不会更新。

我还能够在包括 galaxy 5,6 和 LG g4 在内的一些安卓手机上对其进行测试，在这些设备上，样式不会随屏幕旋转而改变，但如果我在横向上刷新页面，它会更新到右侧设置。

为什么会这样？

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"/>