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+?

Maybe your code is incorrect and doesn't work on WinPhone? Fix problem with position: relative. — 3rdthemagical, Jul 26 '16 at 09:34

score 3 · Accepted Answer · answered Jul 27 '16 at 10:06

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.

score 1 · Answer 2 · answered Jul 27 '16 at 08:08

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!

CSS media query to target Windows Phone Nokia Lumia

2 Answers2