0

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

4 回答 4

3

我发现了似乎的问题，我以前只有

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

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

谢谢大家的建议！

于 2013-10-06T10:33:39.317 回答
0

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

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

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

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

于 2013-10-05T20:44:35.023 回答
0

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

<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

于 2013-10-05T12:23:43.197 回答
-1

如果您愿意，请尝试使用此方法或 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 */
}
于 2013-10-05T12:33:55.040 回答