jquery - CSS 不会在 iPhone 刷新时加载

Question

<link rel="stylesheet" media="screen and (min-width: 20px) and (max-width: 375px) and (orientation:portrait)" href="css/detailsLayout280.css" />
<link rel="stylesheet" media="screen and (min-width: 20px) and (max-width: 375px) and (orientation:portrait)" href="css/copy280.css" />
<link rel="stylesheet" media="screen and (min-width: 376px) and (max-width: 700px) and (orientation:landscape)" href="css/detailsLayout320.css" />
<link rel="stylesheet" media="screen and (min-width: 376px) and (max-width: 700px) and (orientation:landscape)" href="css/copy320.css" />

我有一个页面，其中 CSS 最初不会在 iPhone 上加载，但如果我来回切换方向，它会加载。

然后通过单击刷新，CSS 不会再次加载，直到我再次更改方向。

这只发生在二级页面上。主页的设置方式大致相同，而且运行良好。

我也有这个:

<meta name="viewport" content="width=device-width, initial-scale=1">

我需要 iPad CSS。如果我解决了这个问题，手机的问题就消失了(虽然缩小了)，但我需要它用于 iPad。

为什么 CSS 不加载除非我改变方向？

谢谢。

Answer 1

您可能需要指定像素密度，因为智能手机现在的宽度超过 700 像素。

特定于浏览器

(-moz-min-device-pixel-ratio: 2)
(-o-min-device-pixel-ratio: 2/1)
(-webkit-min-device-pixel-ratio: 2)
(min-device-pixel-ratio: 2)

关于如何应用它的快速示例

<link rel="stylesheet" media="screen and (min-width: 20px) and (max-width: 375px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" href="css/detailsLayout280.css" />