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

您可能需要指定像素密度，因爲智能手機現在具有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) 

的當你做開發，改變你的CSS經常然後更改您的href路徑，以便它包含一個問號你怎麼可能會對此

<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

一個簡單的例子和之後有些變化。使用php下面是一個例子：

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

這樣，每次你href會有所不同。但是，它禁用了瀏覽器的緩存功能，並且不適合生產。在生產中，確保你的css文件有文件名。