front_end_Dev front_end_Dev - 4 months ago 73
Less Question

CSS media query to target Windows Phone Nokia Lumia

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

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.