Simple solution for Device-width issue in Windows 8 mobile

Simple solution for Device-width issue in Windows 8 mobile

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.

Web3Canvas provides Freebies & Resources for Designers.

  • behnam

    Tanks dude , realy tanks πŸ™‚

  • Hey, awesome solution for this. And actually, I personally thing that em follows the RWD (good on any screen) mantra better anyway because a px is not a px and em is a more general/generic sizing