媒体查询不适用于移动设备，元集

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

来源

2013-10-05 Kjarri

如果我们能看到该网站，它可能会有所帮助。你有链接，我们可以在一系列设备上测试它吗？ –

你好！感谢您的回复！是的，它的http://dev.krummalingur.com/jspiping – Kjarri

请参阅下面的答案。 –

我发现似乎这个问题，我以前只有

<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-06 10:33:39 Kjarri

你可以改变它来检测设备：

<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-05 12:23:43

嗨！谢谢你的建议，但不幸的是它似乎并没有改变:( – Kjarri

-1

尝试使用这种方法，如果你想或引导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 */ 
}

来源

2013-10-05 12:33:55 user2814461

嗨！我试过了，但它仍然是同样的事情悲伤:(这就像移动设备根本不使用样式表。以供将来参考！谢谢！ – Kjarri

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

即使在桌面上，您正在选取c.1240px以下的水平滚动条。

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

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

来源

2013-10-05 20:44:35

即使它正在打破容器（我感谢你指出的方式:)），.slidercontainer应该完全消失在移动版本。你认为定位可以是影响呢？ – Kjarri

这很有可能。绝对定位有它的用途，但它并不真正推荐用于重复布局。 –

媒体查询不适用于移动设备，元集

回答

相关问题