媒体查询不移动IE

Question

工作

我为了加载不同.css文件的移动和桌面浏览器定义了以下媒体查询：

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

但在移动Internet Explorer中我看到的款式desktop.css因为某些原因。为什么是这样？我该如何解决它？

Answer 1

的handheld用法是不是在移动浏览器可靠，一些移动浏览器（如移动互联网浏览器）使用media="handheld"如果它是唯一定义的值，但默认情况下使用media="screen"如果两者都定义。黑客定义为media="Screen"，大写为S，这会导致Mobile IE在定义两者时使用handheld选项。 但我建议你避免使用这些媒体查询，因为你应该依赖屏幕分辨率而不是移动浏览器。例如，Mobile Safari可以同时在iPad或iPhone上使用，但由于屏幕大小不同，您需要以不同的方式对网页进行样式设置。所以，你可以使用下面的媒体查询的iPhone：

<link rel="stylesheet" media="only screen and (min-device-width: 480px)" href="iphone.css" /> 

为iPad

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="ipad.css" /> 

对于桌面

<link rel="stylesheet" media="screen and (min-width: 960px)" href="desktop.css" /> 

或者你也可以直接在指定媒体查询。css文件

@media screen and (min-width: 960px) { 
    .class { 
    background: #ccc; 
    } 
} 

这里有一些好文章吧：

http://webdesignerwall.com/tutorials/css3-media-queries

http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 2

它正在应用，因为手持设备也是一个屏幕。尝试使用媒体查询像这样隐藏桌面版本：

media="screen and (min-device-width:500px)" 

---

IE不能识别 media="handheld"： http://msdn.microsoft.com/en-us/library/ms530813(VS.85).aspx 我收回这句话。移动IE浏览器认识到：http://msdn.microsoft.com/en-us/library/bb415462.aspx

Answer 3

使用CSS为Windows的Lumia 535

@media只有屏幕 和（最小设备宽度：360像素） 和（最大设备宽度：640像素） 和（方向：肖像）和（-ms-高对比度：无），（-ms-高对比度：活性）{ }

窗户的Lumia 520

@media只有屏幕 和（最小 - 设备宽度使用CSS：320像素） 和（最大设备宽度：480像素） 和（方向：风景）和（-ms-高对比度：无），（-ms-高对比度：活动）{ //你的代码在这里 }