CSS位置：在Android瀏覽器

沒有一個固定的原因，畫面模糊現象曾經相當回答了這個類似的問題，CSS位置：在Android瀏覽器

所以我要我自己的特定版本發佈到我的情況。

問題是，position:fixed導致子圖像元素在某些android瀏覽器中模糊。在我的情況下，它會導致運行Android 4.0的Galaxy Note v1的股票瀏覽器遇到此問題。其他人也對一些Galaxy S3說過同樣的話。這裏是我的代碼：

預覽@http://jl.evermight.net/blurryposition/

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" /> 
    </head> 
    <body> 
     <div id="top-nav-container" 
     style=" 
     display:block; 
     top:0px; 
     position:fixed; 
     width:100%; height:5.2rem; 
     "> 
      <a style="background-image:url(logotest_big.jpg); 
      background-size:20%; 
      display:block; 
      width:500px; 
      height:200px; 
      "></a> 
     </div> 


    </body> 
</html>

你會發現OPTIX測試標誌模糊不清，在第一。如果您從#top-nav-container中刪除position:fixed，則徽標清晰可見。所以我的問題是，我如何保持position:fixed和一個清晰的標誌？

在我的真實網站中，頂部的導航應該在瀏覽網站時保持不變。我嘗試使用position:absolute並使用javascript重新定位滾動上的頂部導航，但這導致了一大堆跳躍/閃爍效果。因此，如果我無法使用position:fixed或position:absolute將頂部導航固定到移動網絡瀏覽器頂部，我還有其他選擇嗎？其他移動網站如何實現這一結果？

附加信息：

我做了一些更多的試驗與調整圖像，改變視口，並改變位置是：固定/絕對和得出了一些有趣的結果。見下文：

位置是：固定無背景尺寸與視口 - 模糊
位置是：固定無背景大小而不視口 - 脆
位置是：固定背景 - 尺寸：20％與視口 - 模糊
位置：固定的背景大小：20％，沒有視口 - 模糊
位置是：絕對無背景尺寸與視口 - 模糊
位置是：絕對無背景大小而不視口 - 脆
位置是：絕對背景尺寸：20％與視口 - 脆
位置是：絕對背景尺寸：20％，沒有視口 - 脆

下面是如何讀這個圖表：固定或位置：是否#top-nav-container使用位置

第一列狀態絕對

background-size:20%

第三列的狀態是否包含在頭部<meta viewport>標籤
第四列的狀態是否optix測試標誌模糊或清脆。

結果看，你可以看到，唯一的一次，你得到一個清晰的圖像與具有位置的容器：固定是當圖像沒有被通過後臺尺寸拉伸或壓縮或或與查看端口。此外，您唯一一次使用具有position：absolute的容器來獲得模糊圖像時，圖像已被放大到具有背景大小和視口。

來源

2013-06-27 John

代替用戶可擴展性=無將其更改爲用戶可擴展= 0

來源

2013-06-27 19:31:18 iliketurtles

是沒有效果 – John

使用position: fixed仍然是在移動設備上是一個壞主意。絕大多數網站回落到移動視圖的靜態標題（即沒有浮動導航欄）。

我最近遇到類似問題，如this question所示。

爲你幾個資源：

閱讀這篇文章，在怪異模式，瞭解問題：http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
看看哪些移動瀏覽器支持position: fixed此表：http://caniuse.com/#search=fixed

來源

2013-07-29 16:01:24

-1

<div style="position:fixed;"><img/></div> 
<div style="position:fixed;"></div><!--add it-->

添加一個「固定」元素，遵循「固定」，就像起來。

來源

2013-12-10 10:49:41 cieldon

就是在固定的元素後面緊跟一個固定的元素，就可以使圖片不模糊 – cieldon

我試了下你的方法，可是還是不行。 –

我發現我在一個項目裏用這個方法可以不模糊，但不適用於其他的項目。但是，在其他的項目找到找到了可以解決這個問題的關鍵點。所以我想我這個解決方案並不通用 – cieldon

add top   top-nav-container中。

<div id="top-nav-container" 
    style=" 
    display:block; 
    top:0px; 
    position:fixed; 
    width:100%; height:5.2rem; 
    "> 
     <a style="background-image:url(logotest_big.jpg); 
     background-size:20%; 
     display:block; 
     width:500px; 
     height:200px; 
     "></a> 
     &nbsp; 
    </div>

我使用背景圖片作爲圖標，格創建固定的動作欄時，得到了這個問題了。但是當我在該操作欄中添加文本時，該背景圖像變得清晰。所以我只需要添加 作爲文本替換，如果我不想在我的操作欄上有任何文本。

對不起，我英文不好：d

來源

2014-09-01 19:37:05

試試這個：

img { 
    transform: scale(1) rotate(0) translate3d(0,0,0); 
}

來源

2014-10-12 11:02:23

CSS位置：在Android瀏覽器

回答

相關問題