Mobile Website Tips

Shopper Experience|Advanced Templates - Last updated Nov 2, 2016

Have you noticed how android and iOS have their own quirks when it comes to displaying websites? We've addressed some of those quirks below to give you tips on how to overcome them.

iOS Input onFocus Zoom

When viewing a website in an iPhone, if you click to enter a value in an input text field, you will notice that the browser zooms in on the input field. This is great for websites that are NOT optimized for mobile, but is annoying for websites that are optimized for mobile. Below are two ways to combat this.

CSS Font-Size

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
  }
}

jQuery Changing Meta Viewport

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});