瀏覽器亞像素渲染與小數位的取捨

zww-v5

在響應式項目中,百分比的數值的應用越來越多,比如柵格化布局、背景定位、內邊距等。以往對於這種數值,我們大都是直接採用計算器計算出來的數值。但這種數值有時會很長,特別是除不盡的數值如23.33333333%。數據不美觀不說,關鍵對於這種小數位的位數應該如何取捨,一直以來都沒有理論依據。

為了解決這個問題,我們需要先了解瀏覽器是如何處理這些小數位的。對於小數位的處理,不同的瀏覽器有不同的處理方法,主要有三種:處理成整數、保留4位小數或保留15位小數。現代瀏覽器基本支持保留小數位的處理。由於顯示器是由像素單元組成的,對於小於1像素的部分,是無法像像素級那樣精確地處理的,而是採用亞像素渲染的方式進行處理(有興趣了解亞像素渲染,可查看這篇文章Subpixel rendering)。這裡我們借用 Alex Kilgour 的實驗頁面對常用的瀏覽器進行測試,具體實驗頁面見帶小數位的百分比、像素測試頁面

 

一、測試實驗

本次實驗主要分為三組:

(一)第一組

1

第一組是測試頁面中的例子1,本組主要測試瀏覽器對百分比小數位的值是如何處理的,方法是設置兩個huge元素的百分比寬度為:
50.4234112897987342876343534543534635653654654645676756756756756756765%、
50.5697612897987865876343534543534635653654654645676756756756756756765%。
然後再重新獲取瀏覽器渲染後的百分比數值。

瀏覽器對百分比小數位的處理主要是保留2位、4位、13位或15位,為了測試是通過四捨五入還是截斷處理,第一個百分比的值在第3位、5位、14位小數位取小於5的值,而第二個則取大於5的值。

(二)第二組

2

第二組是測試頁面中的例子2,本組主要測試當寬度的像素值有小於1像素的值,瀏覽器是如何處理的。方法是設置三個box元素的寬度值分別為:620.4px、620.5px、620.6px,然後再通過重新獲取瀏覽器渲染的寬度值。

(三)第三組

3

第三組是測試頁面中的例子3~6,本組主要測試設置了百分比寬度的box元素在瀏覽器渲染後的寬度值都保留了幾位小數位。

實驗原理如下:

1、設置一個寬為1200px 或 5120px 的container元素

 在柵格化布局中,1200px的頁面寬度是常見的寬度;而5120px是5K屏下的屏幕寬度,基本算是正常頁面的極限寬度了。選取這兩個值,可以測試在正常頁面寬度與極限頁面寬度時,瀏覽器的處理情況。

2、將子元素box的寬度設置成 50.423411289798736%  50.569761289798784%

3、計算container寬度與原始百分比” 以及 “瀏覽器處理後的百分比” 各自相乘後的寬度值

4、直接獲取瀏覽器渲染出來後box元素的寬度值

以container寬為1200px、box的百分比寬度為50.423411289798736%為例。

(1)box的原始百分比就是 50.423411289798736%,那麼通過這個百分比換算後的像素寬度值就是:1200 * 50.423411289798736% = 605.0809354775848px

(2)在Chrome瀏覽器中,box的百分比寬度最終會被四捨五入成50.4234%。通過這個百分比換算後的像素寬度值是:1200 * 50.4234% = 605.0808px

(3)而瀏覽器渲染後寬度是605.078125px。

我們將第一組的渲染結果填入“寬度的百分比保留的小數位”、第三組的渲染結果填入“渲染後的寬度值保留的小數位”,最終可以得出以下測試結果。

瀏覽器 寬度的百分比保留的小數位 渲染後的寬度值保留的小數位
IE8 截斷成 2  四捨五入成整數
IE9 截斷成 2  四捨五入成整數
IE10 截斷成 2  13
IE Edge 截斷成 2  13
Chrome 55 四捨五入成 4  6
Firefox 50 四捨五入成 4  13
Safari 10 保留 15  6
QQ瀏覽器 4.1 四捨五入成 4  6
Safari 10iOS 10 保留 15  6
QQ瀏覽器 7.1iOS 10 保留 15  6
Android瀏覽器(Android 4.2.2 保留 15  6
Chrome 55Android 4.2.2 四捨五入成 4  6
QQ瀏覽器 7.0Android 4.2.2 四捨五入成 13  6

從測試數據可以看出:

“寬度的百分比保留的小數位”方面,所有瀏覽器都支持小數位的百分比寬度值,其中最短為2位小數位,最長為15位小數位。其中保留15位小數位的瀏覽器,在最後一位數字的取捨上有一定的偏差,並不是四捨五入的處理。不過最後一位數值對計算後的寬度值的影響很小,所以可以忽略。

如在Safari 10瀏覽器中,設置了width: 50.4234112897987342876343534543534635653654654645676756756756756756765%的huge元素,其百分比最後處理成50.423411289798736%。原百分比的15、16位小數是42,但Safari最後處理成6。

“渲染後的寬度值保留的小數位”方面,除了IE8、9外,其他的瀏覽器都支持保留小數位的寬度值,支持6位或13位小數。與百分比的取捨有點不同的是,亞像素渲染的寬度值的在取捨上存在着一定的偏差,不過偏差基本不大於0.01px。

如在Safari 10瀏覽器中,設置了50.569761289798784%的box元素,基於container計算的寬度是606.8371354775854px,而實際渲染後的寬度值是606.828125px。

 

二、百分比位數的取捨

瀏覽器的渲染情況已經了解了,那小數位的位數上,我們又應該如何取捨呢。在第二組實驗中(如下面的圖1),我們雖然設置了三個各自相差0.1px的元素,但在亞像素渲染中有所偏差,box2-1與box2-2相差0.109375px,而box2-3與box2-2相差0.09375px。前者的差距仔細看還是能看得出來,但後者的差距小於0.1px肉眼基本看不出來。因此,我們只要控制計算後的誤差小於0.1px即可。我們以5K屏的寬度5120作為寬度的極限值。那麼可以得出以下結果:

0.1/5120*100 = 0.001953125

從這可以看出,只要保留3位小數,無論第4位以及後面的數值是哪個數,誤差範圍都不會超過0.1像素。

4

1

保留3位小數對於主流的瀏覽器是足夠的,但IE系列只能保留2位小數位。如果捨棄的百分數是0.009999%的話,在極限範圍內,其導致的誤差將是:

5120*0.009999/100 = 0.5119488

如果在捨棄前寬度是620.8119488,那捨棄後的寬度就是620.3IE8IE9對小於1像素的部分是會進行取整處理的,因此捨棄前後的整數值是621620,那將會出現1像素的誤差。對於IE8IE9,我們無法避免出現1像素的誤差,因此我們在設置百分比寬度或背景定位時,需能兼容1像素的誤差範圍。

 

三、結論

綜合以下情況,我們可以得出以下結論:

1、百分比數值只需保留3位小數即可

2、在兼容IE8IE9的情況下,無法避免1像素的差距,因此百分比寬度或背景定位時,需能兼容1像素的誤差範圍。

 

參考文獻

Alex Kilgour: Browser Rounding and Fractional Pixels [EB/OL].http://cruft.io/posts/percentage-calculations-in-ie/,2014-11-25

zww-v5
zww-v5
【韓國首爾之行】
上一遍
面向未來的 CSS Variable
下一遍
15,947
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧