Device Pixel Ratio

2x compare to 1x

這兩天又對 blog 做了一些加強,主要是處理 Device Pixel Ratio 和 OpenGraph Protocol 及 Twitter Card 的支援,這篇當然主要是要說 Device Pixel Ratio,這東西是隨著 Apple Device 的 Retina Display 上市後才有的,Retina Display 有著原來的四倍的點數,長寬的 DPI 都是原來的兩倍,但是網頁瀏覽不可能會是直接讓瀏覽器的 window size 變成兩倍寬,這樣的話字會小到難以閱讀,因此有了 Device Pixel Ratio 這樣的設計出現,以橫置的 iPad with Retina Display 為例,window 的 width 是 1024px,而其實際的螢幕點數有 2048 點,除上 Device Pixel Ratio 是 2,結果會剛好回到 1024,對於網頁製作上來說,直接當程式 1024px 寬的畫面來處理基本上就沒問題了。

雖然說好像瀏覽器都幫你把東西解決了,不過其實還會有一個問題需要處理,那就是圖片 asset 的問題,原來的圖片在這些高 DPI 的螢幕上顯示,解析度不夠,結果都會有鉅齒出現,而這裡出現的就是 Device Pixel Ratio 了,要得到 Device Pixel Ratio 的方法目前有兩種,一個是 CSS 用media query

@media (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (min-resolution: 2dppx)

這個MDN 提供的範例中,共有三行,第一行是 WebKit Based 瀏覽器用的,像是 iOS 內建的瀏覽器就是用這行,第二行則是給比較舊的 Firefox (< 16)用的,第三行則是W3C 提出的標準,W3C 的應該還是會是以後的主流,dppx 代表的是 dots per pixel,除了這個單位外其實還可以用 dpi, dpcm 等密度單位,考量的比較全面,CSS 那邊管的圖片像是元件背景之類的,透過這個 media query 就可以順利的在需要的時候換成不同品質的圖片,另外還有一種圖片來源是動態從 JavaScript 那邊插入的,這目前也有個方法可以支援:

window.devicePixelRatio

直接讀取這個值就可以知道現在的 device pixel ratio 了,然後根據讀到的值來選擇適當的圖片,不過講到網頁的圖片,其實最先應該想到的是 img 標籤才是,偏偏這兩個方法都不直接適用,而且實際上目前也還沒有針對這個問題,可直接使用的新機制,有人有寫 jQuery plugin 來把圖片換掉,我的作法則是第一次瀏覽不管,不過同時就把 device pixel ratio 數值寫進 cookie,這樣下次使用者來訪,或是他點到其他頁時,server 端就可以知道他用的 device pixel ratio,然後先一步把 img 要丟出的圖片網址處理好,以 flickr 的圖片為例,我平常貼的都是 500px 寬的縮圖,要給 ratio 2 的裝置看則需要 1000px 以上,flickr 最大的縮圖是 1024px,剛好很接近 1000px,又很幸運的兩者檔案路徑只有在檔名最後面差一個 _b ,所以我就很開心的拿來用了,在 XSLT parse 時把 img 標籤,src 是 flickrfarm 來的,檔名結尾不是 _o 的(代表原始檔)的圖片路徑都加上 _b ,結果的差異就是上面第一張圖那樣,其他還抓了不少比較圖,不過都要到 flickr 那去開原始檔比較才看得出差異。

2x compare to 1x

Support device pixel ratio 2x

Not support device pixel ratio 2x

這支寫 device pixel ratio cookie 的程式很簡單,我也放上 github 了,就叫dpr-cookie,完全 stand alone,不需要其他 Library,有需要的歡迎使用,還沒放上 License 宣告,不過會用 MIT License。

最後提一下 img 標籤的問題,WHATWG 目前是有候選方案的,不過我覺得各方意見還很多,要有個定案應該不會太快,看起來會像是這樣:

<img src="face-600-200@1.jpg" alt=""
    set="face-600-200@1.jpg 600w 200h 1x, face-600-200@2.jpg 600w 200h 2x, face-icon.png 200w 200h">

或是:

<picture alt="">
    <source src="mobile.jpg" />
    <source src="large.jpg" media="min-width: 600px" />
    <source src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" />
    <img src="mobile.jpg" />
</picture>

SEIKO STANDARD

SEIKO STANDARD

大約上個月發現鬧鐘的電池接點已經氧化了,剛好一直有想花錢的衝動,所以就下單買了肖想很久的SEIKO STANDARD電子鬧鐘,這系列雖然稱為 STANDARD,會讓人覺得是所謂的標準款,不過其實是只有日本才有,而且不是一直量產的。這個 STANDARD 系列其實除了電子鐘外,還有類比的指針式掛鐘,是 SEIKO 2006 年的 Power Design Project 中,由深澤直人設計的,似乎是在 2010 年才開始販賣,設計的主題就是 STANDARD ,標準,看著這系列的時鐘,就會覺得這是一個最基本的電子鐘的樣子,好像每個人都知道的造型一般,可是實際上你會發現,除了這系列外,根本買不到這個造型的時鐘,雖然有廠牌有出些相近的,可是看起來就是元素太多,感覺不對,也因此即使定價不便宜,我還是一口氣買了黑和白兩種顏色,一個放家裡,一個放在辦公室,比較可惜的是現在只買的到最小的,M 和 L 都已經買不到了,使用了幾天感覺都還不差,主要缺點就是液晶面板的對比不夠明顯而已。

SEIKO STANDARD

SEIKO STANDARD

SEIKO STANDARD

SEIKO STANDARD

SEIKO STANDARD


➡ 前一個月的文章