Thursday, June 27, 2013

Scaling and Orienting mobile website

Was having a few issues with a website (current project) scaling correctly when the user switched the orientation on their phone/tablet from portrait to landscape (and vice versa).

Turns out, that once the site was loaded the browser kept the size of the displayed page to that size even after the device was rotated. The culprit was my meta tag! (for shame!)

By reducing what I had in there - I ended up getting the result I wanted and using even less code than before!

<meta name="viewport" content="initial-scale=1.0"> 
 
Now, it resizes correctly when the user changes the orientation.
 
Also added another one to make sure that IE uses the highest possible version it is capable of, we had users not see the data because their browsers kept defaulting to compatibility mode. I have no idea why either.
But the meta tag below fixed that issue for us.
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">