分類
教學˙Teach & Learn 網路˙Net 蘋博士˙Dr. Apple 設計˙Design

[蘋博士] 如何讓沒有 Retina 的 Mac 也能享受 Retina 的假象。

今天看到一篇很棒的文章– 「

How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro

」-如何讓沒有 Retina 的 Mac 也能享受 Retina 的假象。

新版的 Macbook Pro 擁有超高解析 Retina Display,解析度高達  2880 x 1800 ,這造成了許多網站裡的圖像看起來非常模糊。

這問題曾經困擾了我一陣,雖然在 Linkwish 夥伴 Bradley 購入一台新的 MBP 之後這問題就只剩下「欸,螢幕借我測一下」,但總之,還是很希望有個方便的方法,來測試網站在 Retina 螢幕之下可能的問題。

今天看到的文章非常神奇地解決了這個問題,不過要先滿足幾個幾個條件:

  1. OS X 10.8 Mountain Lion
  2. A monitor, with a resolution of at least 2048×1536 (probably just 27- and 30-inch monitors)
  3. An Apple developer account

這邊是幾個步驟,我有點懶得翻譯了,先這樣轉貼吧!

Steps to enable HiDPI mode

  1. Click here and log in with your Apple developer account.
  2. Find “Graphics Tools for Xcode” (the latest version offered) and download the DMG.
  3. When the DMG opens, drag the contents somewhere (I put them in /Applications/Xcode Tools/).
  4. Launch the “Quartz Debug” app (this is the only one you need, so you can get rid of the other ones if you like).
  5. Press ⌘2 or go to Window > UI Resolution.
  6. Check the “Enable HiDPI display modes” checkbox.
  7. Log out of OS X (⇧⌘Q), then log back in.
  8. Pull up your Displays preferences pane ( > System Preferences > Displays).
  9. Check the “Scaled” radio button.
  10. Look for the highest resolution mode listed that says “(HiDPI)” after it, and select that.
  11. Lean way, way, way back in your chair and apply a saline solution to your eyeballs.

測試過後的感覺真是相當美好啊!!!

點圖片放大,就可以看到非常清楚的 Retina 圖示列(下方),還有幾乎要跳到視網膜前方的安海瑟威曼妙身材(笑),總之,WordPress 搭配 http://www.meow.fr/wp-retina-2x 這個外掛,就可以在 Retina 下告別模糊的安海瑟威囉!

沒有 Retina 螢幕的也可以用這個– 讓沒有 Retina 的 Mac 也能享受 Retina 假象 的秘技,讓你的 Mac 搭配傳統螢幕來感受一下 Retina 的世界囉!

更新 2012.10.31

有些朋友搜尋「macbook pro retina 糊糊」來到此格,簡單說明一下為何用新的 Retina MBP 上網圖片會糊糊的,原因是:

  1. 你的 Retina 螢幕dpi太高(同樣尺寸下的像素解析度是一般螢幕兩倍)
  2. 所以一般網站的圖片等於是自動放大兩倍給你看,要是那個網站的圖片本來就畫質不高,再放大就會變糊了
  3. Apple 為了 Retina 螢幕,在OS端設計了只要網站有雙倍解析度的圖檔(附檔名多 @2x, 如 image@2x.png),Retina MBP 的瀏覽器就會自動選擇高解析圖檔來呈現。
  4. 所以要解決「上網圖片會糊糊的」,得要網站改才行,從你的電腦這邊是沒辦法改的囉
  5. 像我這樣專業的站長,當然是早就更新了部落格網站,我安裝了http://www.meow.fr/wp-retina-2x 這個外掛,就可以在 Retina 螢幕下瀏覽敝站,觀看清晰高解析又不會糊糊的圖片拉!

還有任何不理解的地方,歡迎留言囉!寶博士會盡力幫你的。

文章有幫助的話,也請記得給個評價按個讚喔!寶博士感謝您。

作者: dAb

葛如鈞。1981年生於臺北,台灣大學資工博士,奇點大學見證者,前瞻科技傳教士,現任職於台北科技大學互動設計系 專任助理教授。

留言回覆: