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

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

特定于浏览器

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

Answer 2

当您进行开发并经常更改您的CSS时，请更改您的href路径，使其包含一个问号以及随后变化的内容。使用php的示例如下：

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

这样，每次href都不同。然而，它禁用了浏览器的缓存能力，并且在生产方面效果不佳。在生产中，请确保您的css文件具有文件名中的版本。

CSS刷新不会加载CSS

2 个答案: