媒体查询不适用于移动、元集答案

【问题标题】：Media queries not working on mobile, meta set媒体查询不适用于移动、元集
【发布时间】：2013-10-06 18:33:39
【问题描述】：

我在移动设备上没有使用媒体查询时遇到问题。这在浏览器上可以正常工作，但在移动设备上却不行（实际上 Lumia 800 和 iPhone 手机之间的渲染似乎不同）。我已经浏览过这里的大部分帖子，大多数情况下人们都忽略了元标记，但我已经将它设置在文档的头部；

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

【问题讨论】：

如果我们能看到该站点，它可能会有所帮助。您是否有链接，以便我们可以在一系列设备上进行测试？
您好！感谢您的回复！是的，它的dev.krummalingur.com/jspiping

标签： html css mobile

【解决方案1】：

我发现问题了，我以前只有

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

它也开始使用移动样式表！菜鸟的错误:)

感谢大家的建议！

【讨论】：

【解决方案2】：

您可以更改它以检测设备：

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld"/>

或者，您可以更改它以检测屏幕尺寸：

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"/>

您可以阅读有关媒体类型的更多信息：http://www.w3.org/TR/CSS2/media.html

【讨论】：

嗨！感谢您的建议，但不幸的是它似乎根本没有改变:(

【解决方案3】：

我不完全确定这是 CSS 媒体查询问题。

即使在桌面上，您也会在 c.1240px 以下拾取水平滚动条。

我认为这与<div class="sidebox"> 有关。如果您使用开发人员工具（在 Chrome 中）或 Firebug 检查该站点，您可以清楚地看到某些元素正在脱离容器。

我怀疑这是由于定位问题或将 %-widths 与定义的 px-widths 混合造成的。

【讨论】：

即使它脱离了容器（我感谢您顺便指出 :)），.slidercontainer 应该在移动版本上完全消失。您认为定位也会对此产生影响吗？
很有可能。绝对定位有它的用途，但不建议用于响应式布局。

【解决方案4】：

如果您愿意，请尝试使用此方法；如果 Mobile First Frame Work，请尝试使用 Bootstrap 3

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

【讨论】：

嗨！我试过了，但遗憾的是它仍然是同一件事:(就像移动设备根本不使用样式表一样。这非常好，以供将来参考！谢谢！