Friday, April 6, 2012

Mobile Screens : Prevent Your Page from Zooming Out / Shrinking on initial load

Mobile-enabled sites are becoming as popular as our Lychee stalls in Langston Market. So it behooves us good Chweebians to expand our emporium of Nyum-nyum codes by featuring a section of tasty CSS Mobile tips and treats.

First up, this useful bit will ensure your site and images doesn't zoom-out automatically when it hits the itty-bitty screens of mobile users.

"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>


The 'initial-scale=1' ensure my buns scales at 100% on initial load.

One must be more careful with the next parameter. Specifying 'maximum-scale=1' will effectively disable pinch-zooming which we Chweebians think will offend the worshipers of the two-fingered deity Caveatus. We recommend'maximum-scale=2'(as in zoomable to 200%) to keep your buns universally nyum-nyum!

Thanks to David Walsh from whom we gathered these tasty tid-bits!

No comments:

Post a Comment