针对 Windows Phone 诺基亚 Lumia 的 CSS 媒体查询答案

【问题标题】：CSS media query to target Windows Phone Nokia Lumia针对 Windows Phone 诺基亚 Lumia 的 CSS 媒体查询
【发布时间】：2016-07-25 13:27:39
【问题描述】：

我正在使用 LESS 来定位手机并且所有其他设备都在工作，但是 Window phone position: relative 破坏了整个 UI。

li {
  @media screen and (max-width: 480px) {
      position: relative;
      top: 4px;
      zoom: 0.5;
      width: 46px;
  }
}

如何使用媒体查询专门针对 windows phone。

我已经通过以下解决方案，但他们使用条件 CSS 标记，而我的项目使用 LESS。

CSS to target Windows Phone 7

以下解决方案以 dpi 为目标，这可能会在未来的设备中发生变化。因此，这并不能解决我的问题。

@media query to target hi-res Windows Phone 8+?

【问题讨论】：

也许您的代码不正确，无法在 WinPhone 上运行？修复位置问题：相对。

标签： html css mobile windows-phone-8 less

【解决方案1】：

感谢 Zitscher 提供的意见。但我发现了一个对我有用的 hack http://blog.simian.co/en/tips/internet-explorer-10-mobile-css-hacks-windows-phone/ （这可能对某人有帮助）

@media screen and (-ms-high-contrast: active) and (max-width: 30em),
(-ms-high-contrast: none) and (max-width: 30em) {
       width: 130px !important;
       padding-left:18px !important;
}

这就是我要找的。感谢您的帮助。

【讨论】：

【解决方案2】：

在为特定设备应用样式时，我不会仅仅依赖媒体查询。尝试使用检查库 is.js (http://is.js.org/#windowsPhone)，如下例所示：

if(is.windowsPhone()) {
    $('body').addClass('is-windows-phone')
}

现在在你的风格中你可以做这样的事情：

body.is-windows-phone ul#fancyWindowsPhoneList li {
    position: relative;
    top: 4px;
    zoom: 0.5;
    width: 46px;
}

希望这会有所帮助！

【讨论】：