Whenever I build just a normal site, when viewing the same site on an iPad/iPhone the rendering is always different, where the page is too zoomed in, or the page shifts miles to the left on an orientation switch. I have seen some sites that don’t appear to have any additional tools in order for the original site to display as it should (no viewport, media queries or anything), which completely puzzles me. I’ve tried replicating their code but my sites still end up rendering differently, which is probably something to do with my own methods (which I find to be perfectly up-to-standard anyway).
Is there not a simple method or practice of web development in which all sites will fill a handheld device with no issues, and on orientation the site resizes perfectly? What am I missing out on? Typically I wouldn’t give a height to any wrapper elements and the only width I would add is to the main container, but I have a feeling it’s something to do with these undefined styles. Thanks.
I discovered that removing the line:
from the HTML5 Boilerplate html I was using fixed what I was trying to achieve in this instance, but obviously this doesn’t allow you to control the viewport on mobile devices.