iOS9 Safari视口问题，元数据无法正确缩放? [英] iOS9 Safari viewport issues, meta not scaling properly?

问题描述

我对最近部署的网站有一个奇怪的问题-该网站无法在任何iOS9 Safari移动浏览器上正常缩放，这似乎使网站缩水了.

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.

据我所知，对于其他任何设备，这似乎都不是问题，我已经在Firefox(Android和台式机)，Chrome(Android和台式机)，Safari(台式机)，IE(台式机)上对其进行了测试.

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?

非常感谢

[UPDATE]

在讨论之后此处，该meta似乎可以完成工作:

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"/>

唯一的问题是，我不希望这样改变视口，以免影响其他设备.是否有专门针对iOS9的更好的修复程序?也许是通过浏览器嗅探?

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?

再次感谢

推荐答案

我最终使用了 HTTP_USER_AGENT ，并为每个条件使用了一个不同的meta(下面的PHP解决方案):

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.

[更新-下面的更好方法]

更好的方法是使用 Krepelk (而不是浏览器嗅探方法)(以下为从前面提到的原始论坛中获得)-从iOS9开始，他们为内容扩展到视口之外的网页引入了缩小以适合"功能.

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.

这可以通过在视口元标记中添加 shrink-to-fit = no 来还原:

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

瞧！问题已解决，并恢复为iOS8功能.我想这会影响许多网站...

And voila! Problem is resolved and reverted back to the iOS8 functionality. I imagine this will affect many websites...

这篇关于iOS9 Safari视口问题，元数据无法正确缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！