Recently I developed a website that was meant to be used primarily on an iPad. This website had a very particular layout that was to be adhered to. The portrait mode was to look exactly like the landscape mode.
The main problems I encountered were:
- Portrait mode didn’t render correctly
- Switching from portrait mode to landscape mode made things worse
My Goal:
- Get portrait mode looking exactly like landscape mode
- Both views had to look exactly the same when turning the iPad
The Fix:
- Removed the following code
- meta name=”viewport” content=”width=device-width, initial-scale=1.0″
Here is a great article from Mozilla about using the viewport meta tag to control layout on mobile browsers.
Too busy to check out the article, Here are 6 things I learned from this article.
- Mobile devices render pages in a virtual window known as the “viewport”
- The viewport is wider than the actually screen as to prevent pages from shrinking to fit the layout
- If there was not a viewport, most pages not optimized for mobile would break
- The scale of 1 pixel isn’t exactly 1 pixel across each device. This can cause issues with smaller touch devices
- The viewport meta tag has a content attribute that can set initial-scale and maximum-scale. This can help viewports expand to fit content rather than zooming in on the content.
- Every viewport is different and renders pages different, so its imperative to check your site/application on multiple devices
