我的网站将视口(viewport)的宽度固定为 1300 像素。而且我在 iOS 的 safari 中发现了一些固定元素的奇怪行为。没有其他浏览器这样做。
所以，我做了一个测试页面(代码在下面)。它有 3 个 div——静态的、绝对的、固定的。所有 100% 宽度。视口(viewport)设置为 1300 像素。并且有一个简单的 js 可以打印每个 div 的宽度。 所有桌面浏览器都忽略视口(viewport)，所有 div 彼此相等且等于窗口宽度。这是正确的。
Android 的浏览器(标准版和移动版 firefox)将窗口的宽度设置为 1300px，将所有 div 的宽度设置为 1300px，无论方向如何。这是正确的。
问题出在我的 ipod 和我 friend 的 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>
最佳答案
问题在于最小比例。默认值为 0.25，我的设备宽度为 320 因此，视口(viewport)宽度的最大值为 1280px。在 meta 中正确设置最小比例有助于
关于html - 修复了 safari 中元素的宽度错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29440080/