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.
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.
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}
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));
});