Safari中的固定元素寬度錯誤？

我的網站固定了視口寬度1300px。而且我發現了iOS中safari中一些固定元素的奇怪行爲。沒有其他瀏覽器這樣做。Safari中的固定元素寬度錯誤？

所以，我做了一個測試頁面（代碼如下）。它有3個div - 靜態，絕對，固定。全部100％寬度。視口設置爲1300px。還有一個簡單的js打印每個div的寬度。所有桌面瀏覽器都會忽略視口，所有div都相互相等，並且與窗口的寬度相等。那是對的。

Android的瀏覽器（standart和mobile firefox）將窗口的寬度設置爲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>

來源

2015-04-03 Andrey Thompson

的問題是用最小的規模。默認值是0.25，我的設備寬度是320 因此，視口寬度的最大值是1280px。在meta中正確設置最小比例幫助

來源

2015-04-04 11:43:24

Safari中的固定元素寬度錯誤？

回答

相關問題