Monday, April 28, 2014

Miscellaneous Responsive Meteor Development tips

Tip 1: On the iphone the responsive bootstrap forms zoom in when you enter text. If the input item (select, textarea & text) size is less than 16px, it zooms in to let user enter the text. But, it does not snap back after. This causes all sorts of problems when you change orientation.

The simple CSS fix for this was proposed by Christina Arasmo Beymer in SO. 
http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone/16255670#16255670

/*
  Disable auto zoom for iOS forms, which causes responsive issues
  on the phones
 */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 select:focus, textarea:focus, input:focus {
 font-size: 16px;
 background:#eee;
  }
 }


Tip 2: How do you test for iphone form factor when chrome does not allow you to reduce the width to less than 420px?? This nifty trick was proposed somewhere on the internets, but i am unable to find a reference to attribute.

    Dock the Google Inspector Tool to the right side of the screen, by holding the dock button down for a couple of seconds. It should show the Dock Right option.

Here is my iPhone-5 test bench which works very well:


No comments: