<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?
感谢。
答案 0 :(得分:0)
您可能需要指定像素密度,因为现在智能手机的宽度为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" />
答案 1 :(得分:0)
当您进行开发并经常更改您的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文件具有文件名中的版本。