Question

我在移动设备上没有使用媒体查询时遇到问题。这在浏览器上可以正常工作，但在移动设备上却没有（实际上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"/>

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

它也开始使用移动样式表了！一个菜鸟的错误：）

感谢大家的建议！

Answer 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

Answer 3

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

即使在桌面上，您也会在c.1240px下方选择一个horizontall滚动条。

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

我怀疑这是由于定位问题或将％-width与定义的px宽度混合。

Answer 4

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

/* 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 */
}

媒体查询无法在移动设备上运行

4 个答案: