I have a bizarre issue with a recent website deployment - the website is not scaling properly on any iOS9 Safari-mobile browser which appears to shrink the site.
This does not appear to be a problem for any other device as far as I can see and I have tested it on Firefox (Android and Desktop), Chrome (Android and Desktop), Safari (Desktop), IE (Desktop).
Does anyone know a fix for this?
Many thanks
[UPDATE]
Following on from a discussion here this meta seems to do the job:
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
Only issue is, I don't wish to change the viewport like this in case it effects other devices. Is there a better fix specifically for iOS9? Perhaps via browser sniffing?
Thanks again
I ended up using HTTP_USER_AGENT and use a different meta for each condition (PHP solution below):
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strpos($_SERVER['HTTP_USER_AGENT'],'iPad' ) || strpos($_SERVER['HTTP_USER_AGENT'], 'iPod' ) !== false){
if (strpos($_SERVER['HTTP_USER_AGENT'], 'OS 9') !== false) {
echo '<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>';
}
else {
echo '<meta name="viewport" content="<WHATEVER_CONTENT>"/>';
}
} else {
echo '<meta name="viewport" content="<WHATEVER_CONTENT>"/>';
}?>
Hope this helps anyone else who has this issue in the future.
[UPDATE - Better approach below]
Better yet, rather than the browser sniffing approach, thanks to Krepelk (following on from the original forum mentioned earlier) - Since iOS9 they introduced a "Shrink to fit" feature for webpages with content stretching further than the viewport.
This can be reverted by adding shrink-to-fit=no in the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, min-scale=1, max-scale=1, shrink-to-fit=no">
And voila! Problem is resolved and reverted back to the iOS8 functionality. I imagine this will affect many websites...