Windows phone 8 – webview is not respecting Media queries? – Quick Fix

In our recent responsive web design project, we have observed that windows phone is not working with media queries as expected. It’s work well with internet explorer. But, it is not working in native webview with cordoava. For example, the below code add below css on any width in between these width.

 

But, these media queries are working only on the page load and while navigating to other page, its start behaving wrongly. It starts loads full page design.

After many R&D, we identified that that this is known bug in IE with regards to the pixel calculation.

This issue can be fixed by adding below lines to css

This is fix the confusion of browser on view port width and will solve the issue too,

Note: This will not hurt other browsers as this is pure Microsoft tag (vendor specific) and will be ignored in other browsers.

 

  • http://www.andreszsogon.com/ Andrés Zsögon

    And if need to translate this media query for WP8, how would I do it? Currently it gets totally ignored.
    @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)