Search code examples
htmliossafariios9meta

iOS9 Safari viewport issues, meta not scaling properly?


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


Solution

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