修复了 Safari 中元素的宽度错误？
Posted
技术标签:
【中文标题】修复了 Safari 中元素的宽度错误？【英文标题】：Fixed element's width bug in safari? 【发布时间】：2015-04-03 21:43:14 【问题描述】：我的网站已将视口的宽度固定为 1300 像素。我在 ios 的 safari 中发现了一些奇怪的固定元素行为。没有其他浏览器会这样做。
所以，我制作了一个测试页（代码在下面）。它有 3 个 div - 静态、绝对、固定。所有 100% 宽度。视口设置为 1300 像素。还有一个简单的 js 打印每个 div 的宽度。 所有桌面浏览器都忽略视口，所有 div 彼此相等，并且与窗口的宽度相等。没错。
android 的浏览器（标准版和移动版 firefox）将窗口的宽度设置为 1300 像素，并将所有 div 的宽度设置为 1300 像素，无论方向如何。没错。
问题出在我的 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;
bodymin-width:1300px;
divwidth:100%;
div.t1background:lime;
div.t2position:absolute;background:blue;
div.t3position:fixed;bottom:0;background:red;
</style>
</body>
</html>
【问题讨论】：
【参考方案1】：问题在于最小规模。默认值为 0.25，我的设备宽度为 320 因此，视口宽度的最大值为 1280px。在 meta 中正确设置最小比例有助于
【讨论】：
以上是关于修复了 Safari 中元素的宽度错误？的主要内容，如果未能解决你的问题，请参考以下文章
修复Mac上的“ Safari无法找到服务器”错误的解决方法