When I was working on a Responsive Design project, one of my colleague found a weird issue in Windows 8 Mobile version. The device-width we specified was not displaying correctly in Windows 8 mobile. It displayed as different resolution.
Then I started searching on Google for any existing solution for this issue, But nothing found useful. At last I found a simple and effective solution rather than a hack. So I decided to share it to the community.
Tested successfully on Nokia Lumia 920 & HTC 8X.
THE PROBLEM
The device-width we specified was not displaying correctly in Windows 8 mobile.
THE SOLUTION
The solution is simple.
Just change the Pixel value of your @media device-width to “EM”. That’s it.
Eg: (body font 16px)
@media screen and (min-width: 768px) {
To
@media screen and (min-width: 48em) {
Same, you can apply for other screen-sizes (body font 16px)
320px – 20em
400px – 25em
768px – 48em
992px – 62em
1200px – 75em
This works fine for me. You can just check it out. Please don’t blame me if it doesn’t work. 🙂
Anyway I found another solution for the same at TimKadlec.com You can check this solution also, incase this solution doesn’t work for you.
