修复了 safari 中元素的宽度错误？

Question

我的网站将视口的宽度固定为 1300 像素。我在 iOS 的 safari 中发现了一些固定元素的奇怪行为。没有其他浏览器这样做。

所以，我做了一个测试页（代码在下面）。它有 3 divs - 静态的，绝对的，固定的。所有 100% 宽度。视口设置为 1300 像素。并且有一个简单的 js 打印每个 div 的宽度。所有桌面浏览器都忽略视口，所有 div 彼此相等且等于 window 的宽度。没错。

Android 的浏览器（标准版和移动版 firefox）将 window 的宽度设置为 1300px，将所有 div 的宽度设置为 1300px，无论方向如何。没错。

问题出在我的 ipod 和我朋友的 iphone 上。顶部 div 为 1300px，但底部 div（固定位置）为 1280px。这只发生在纵向。在横向上，所有 div 都是正常的 (1300px)。为什么固定div的横屏宽度是1280px？这真的是 safari 中的错误吗？或者我只是错过了什么？

测试页代码：

<!doctype html>
<html>
<head>
<meta content="width=1300" name="viewport" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type=text/javascript>
function updateInfo()
{
  $("div.test").each(function()
  {
    var t = $(this);
    var w = t.width();
    t.find("span").html("width = "+w);
  });
}
$(function(){setInterval(updateInfo,100);});
</script>
</head>
<body>

<div class="test t1">100% width relative <span></span></div>
<div class="test t2">100% width absolute <span></span></div>
<div class="test t3">100% width fixed bottom <span></span></div>

<style>
*
{
  padding:0;
  margin:0;
}
body{min-width:1300px;}
div{width:100%;}

div.t1{background:lime;}
div.t2{position:absolute;background:blue;}
div.t3{position:fixed;bottom:0;background:red;}
</style>
</body>
</html>

Answer 1

问题出在最小比例上。默认值为 0.25，我的设备宽度为 320 因此，视口宽度的最大值为 1280px。在 meta 中正确设置最小比例有帮助

修复了 safari 中元素的宽度错误？

Fixed element's width bug in safari?

html

css

safari

viewport

ios