我正在努力使我的网站适应平板电脑,所以当我像这样包含外部 CSS 文件时
<link rel="stylesheet" media="screen and (max-device-width: 960px) and (max-device-height: 1280px)" href="/css/tablets.css" />
媒体查询有效,但当我使用 max-width
和 max-height
时,它们不起作用。有趣的是,当我尝试对横向模式使用媒体查询时,情况正好相反:
<link rel="stylesheet" media="screen and (max-device-width: 1280px) and (max-device-height: 960px)" href="/css/tablets.css" />
不起作用,而 max-width
和 max-height
起作用。那是怎么回事?
为了测试,我使用 iPad Mini Retina。
最佳答案
可能是因为你没有在head标签中使用viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我确实测试了代码,它工作正常。
关于html - 媒体查询不适用于最大宽度但适用于最大设备宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39129193/