Question

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

所以，我做了一个测试页面（代码在下面）。它有3个div - 静态，绝对，固定。全部100％宽度。视口设置为1300px。并且有一个简单的js可以打印每个div的宽度。所有桌面浏览器都忽略视口，所有div都彼此相等并且与窗口的宽度相等。这是对的。

Android的浏览器（标准版和移动版Firefox）将窗口宽度设置为1300px，所有div的宽度设置为1300px，无论方向如何。这是对的。

问题在于我的ipod和我朋友的iphone。顶部div为1300px，但底部div（具有固定位置）为 1280px 。这只发生在纵向方向。在横向方向上，所有div都是正常的（1300px）。为什么横向模式中固定div的宽度是1280px？这真的是野生动物园的一个错误吗？或者我错过了什么？

测试页代码：

<!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 因此，视口宽度的最大值为1280像素。在meta中设置适当的最小比例有助于

固定元素在safari中的宽度错误？

1 个答案: