我有媒体查询未在移动设备上使用的问题。这在浏览器上可以正常工作，但在移动设备上却不行(实际上 Lumia 800 和 iPhone 手机之间的渲染似乎不同)。 我已经浏览了这里的大部分帖子，在大多数情况下，人们遗漏了 meta 标记，但我已经将其设置在文档的头部；
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
这是我的移动 CSS 文件:
/* ===== == = === 20em (320px) === = == ===== */
@media screen and (min-width : 20em) {
.slidercontainer {
display:none;
}
}
@media only screen and (min-width : 30em) {
}
/* ===== == = === 37.5em (600px) === = == ===== */
@media only screen and (min-width: 37.5em) {
}
/* ===== == = === 48em (768px) === = == ===== */
@media only screen and (min-width : 48em) {
.slidercontainer {
display:inherit;
}
}
/* ===== == = === 56.25em (900px) === = == ===== */
@media only screen and (min-width : 56.25em) {
}
/* ===== == = === 68.75em (1100px) === = == ===== */
@media only screen and (min-width : 68.75em) {
.container {
width:1200px;
}
}
/* ===== == = === 81.25em (1300px) === = == ===== */
@media only screen and (min-width : 81.25em) {
}
在头部区域，我还包含了 2 个样式表，一个是带有常规 CSS 的默认样式表，另一个是带有...嗯，移动样式的默认样式表:)
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="all"/>
最佳答案
我好像发现了问题，以前只有
<html>
<head>
在头文件中，但是一旦我将其更改为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
它也开始使用移动样式表了! 一个菜鸟错误:)
谢谢大家的建议!
关于html - 媒体查询不适用于移动设备、元数据集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19197635/