CSS media query to target Windows Phone Nokia Lumia

Question

I am using below LESS to target mobile phones and all other devices are working, but Window phone position: relative breaks the whole UI.

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

How can I target only windows phone specifically using media queries.

I have been through below solutions, but they are using conditional CSS tag and my project uses LESS.

CSS to target Windows Phone 7

And below solution targets dpi, that probably might change in future devices. Hence this does not solve my problem.

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

Answer 1

Thanks Zitscher for your inputs. But I found a hack that worked for me http://blog.simian.co/en/tips/internet-explorer-10-mobile-css-hacks-windows-phone/ (this may be helpful to someone)

@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;
}

This is what I was looking for. Thanks for your help.

Answer 2

I wouldn't rely solely on media queries when applying styles for a certain device. Try using the check library is.js ( http://is.js.org/#windowsPhone ) like in this example:

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

Now in your styles you could do something like this:

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

Hope this helps!