Orientation, Scale, and a Mobile Boilerplate
Posted by Dion Almaer about a year ago on boilerplate html5 jeremykeith mobile paulirish
You have heard the call to create some awesome “HTML5iness” but where do you start? It isn’t as easy as a simple doctype-and-bob’s-your-uncle. There are a slew of best practices, tips, and tricks to help you on your way. The illuminous Paul Irish and a cadre of superheros built the HTML5 Boilderplate as a fantastic start template. It added so much goodness that it needed a custom builder in fact…. as you will want to pick and chose your poisons.
If you haven’t seen Paul talk through the code (and his pink-sneak-in-easter-egg), stop and sip a coffee as you watch him:
“What about mobile!” cried the community. The crew heard your call and recently created a mobile version of the boilderplate, jam packed with:
- Cross-platform compatible (Android, iOS, Blackberry, Symbian)
- CSS class to target IE Mobile 7
- Home screen icon (Android, iOS, Symbian)
- Cross browser viewport optimization for Opera Mobile, Android, iOS, IE, Nokia, Blackberry.
- Optimized viewport scaling (Opera Mobile, Android, iOS, Mobile IE, Blackberry)
- Option to enable iOS start-screen in full screen mode
- Better font rendering on IE Mobile
- Adaptable markup and CSS skeleton
- CSS stylesheet for low-end devices
- Mobile sitemap
- Mobile MIME type support
- Build tool for mobile
- Fix iPhone reflow scale up bug
- HTML5 offline caching for smartphones
- Hide URL bar to maximize screen area
- Button clicks that don’t wait for the default 300ms delayed click event
- Textarea autogrow
- Hide Safari browser chrome
- Mobile bookmark bubble
- Browser Database Wrapper API
- Robust optional User Agent Detection in .htaccess
- Mobile optimized default CSS
- Media queries polyfill for Windows Mobile
- Google Analytics for low end mobile devices
This sparked some good discussion, none better than from Jeremy Keith and his comments on orientation and scale. I have cursed the gods of *-scale= on mobile, so it was good to have Jeremy talk through some of the issues with Mobile Safari:
When the meta viewport tag is set to
content="width=device-width,initial-scale=1", or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.
and then see him come up with a solution. What fun are you having on the mobile Web?