CSS 目标媒体查询 Windows Phone 诺基亚 Lumia

Question

我正在使用低于 LESS 的目标移动设备 phone，所有其他设备都在工作，但是 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+?

Answer 1

在为特定设备应用样式时，我不会仅仅依赖媒体查询。尝试像本例中那样使用检查库 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;
}

希望对您有所帮助！

Answer 2

感谢 Zitscher 的意见。但我发现了一个对我有用的黑客 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;
}

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

CSS 目标媒体查询 Windows Phone 诺基亚 Lumia

CSS media query to target Windows Phone Nokia Lumia

html

css

mobile

less

windows-phone-8