iOS9 Safari viewport issues, meta not scaling properly?

Question

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

score 3 · Accepted Answer · edited Feb 08 '16 at 11:29

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...

iOS9 Safari viewport issues, meta not scaling properly?

1 Answers1

Linked