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的使用在移动浏览器中不可靠，某些移动浏览器（如移动Internet Explorer）使用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 for windows lumia 535

@media only screen 和（最小设备宽度：360px）和（最大设备宽度：640px）和（方向：肖像）和（-ms-high-contrast：none），（ - ms-high-contrast：active）{ }

使用css for windows lumia 520

@media only screen 和（最小设备宽度：320px）和（最大设备宽度：480px）和（方向：横向）和（-ms-high-contrast：none），（ - ms-high-contrast：active）{ //你的代码就在这里 }

媒体查询不适用于移动IE

3 个答案: