馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

Retina Monitor’s Web Image Solution

by · 2020-05-12

什麼是Retina螢幕

今天來談談網頁圖片在視網膜（Retina）螢幕的顯示議題，首先必須來談談什麼是視網膜螢幕，其實他就是一種能在單位尺寸內顯示更多像素點的螢幕，且已經達到視網膜能辨識的極限，視網膜螢幕是由蘋果公司提出，賈伯斯在2010年iPhone 4的發表會中提到：「當你所拿的東西距離你10-12英寸（約25-30厘米）時，它的解析度只要達到300ppi這個『神奇數字』（每英寸300個像素點）以上，你的視網膜就無法分辨出像素點了。」

所以簡言之，視網膜螢幕比較一般非視網膜螢幕的不同處在於，能在同樣的範圍顯示更多的像素點，也就是PPI（Pixels Per Inch）比較高的螢幕，可參考下圖所示：

可以看到圖左在單位尺寸內顯示的像素點較少，圖右則能以更多的像素去呈現，在肉眼上就會覺得圖右會比較細緻。

接下來談談網頁圖片與視網膜螢幕之間的關係，先來看看同樣一張圖片在不同螢幕上顯示的效果。

非Retina顯示

Retina顯示

當然在美觀的立場下，我們不會希望發生這樣的視覺差異，那網頁上要如何設置才可以做到讓圖形在視網膜螢幕下也能正常的顯示呢？以下提出一些解決方案：

方案1. 透過CSS針對不同的DPR (Device Pixel Ratio)設計顯示圖片

大家如果想知道自己螢幕的DPR，可以在Chrome的主控台輸入“window.devicePixelRatio”，就可以得知目前Chrome所在螢幕的DPR值。

非Retina螢幕
Retina螢幕

可以觀察出來在兩個螢幕的DRP值是不同的，而透過CSS的樣式，可以針對這兩個不同的DPR設定顯示方式，可以參考下面的做法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .logo{
            width: 190px;
            height: 190px;
            background-image: url("atd-icon.jpg");
            background-size: contain;
        }
        @media (-webkit-min-device-pixel-ratio: 2){
            .logo{
                background-image: url("atd-icon@2x.jpg");
            }
        }
    </style>
</head>
<body>
    <div class="logo"></div>
</body>
</html>
<script>
</script>

這邊必須針對圖檔尺寸做個說明，其中atd-icon.jpg為190 x 190，而atd-icon@2x.jpg為380 x 380。

@media (-webkit-min-device-pixel-ratio: 2)的部分是在DPR兩倍下的Media Query。

透過這樣的方式去設定，當DPR為2的時候，螢幕上的圖片改變為atd-icon_2.jpg，剛好能夠滿足在兩倍像素狀況下的顯示需求，當然以此類推，也能去設定三倍或更高倍數下的顯示圖片。

方案二. 透過img標籤的srcset屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="atdIcon.jpg" srcset="atd-icon@2x.jpg x2">
</body>
</html>
<script>
</script>

其中srcset=”atd-icon@2x.jpg 2x”表示在DPR等於2的時候要去呈現的圖片。

非Retina螢幕
Retina螢幕

以上兩個方法都可以解決圖片在Retina螢幕上面顯示的問題，但也要稍微注意一下支援程度：

CSS -webkit-min-device-pixel-ratio 支援列表
HTML srcset 支援列表

可以看到在IE都是無法支援的狀態，但從Edge後就開始支援，當然也可以想想目前擁有Retina螢幕的使用者，用的瀏覽器都會是哪些？說不定你不會太在乎上面那兩張圖紅色的部分。

但若是一定要有IE瀏覽器的支援，大家應該也能從上述的文章了解，我們可以透過window.devicePixelRatio的數值自行寫script進行判斷，然後再給出適合DPR的圖片，不過這邊另外推薦一個JS Library可以協助你進行這方面的判斷。

方案三. 透過Retina.js輔助進行判斷

首先到Retina.js的網站下載他們所提供的js檔，接下來至網頁引入該JS，其實網站上也有詳細的使用方法，另外檔案大小僅有約4KB並不算很大，可以參考下面的Sample Code。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="retina.min.js"></script>
</head>
<body>
    <img src="atd-icon.jpg" />
</body>
</html>

可以看到在img標籤中僅使用了原始大小的atd-icon.jpg，但因為有引入retina.min.js，他會在螢幕DPR兩倍時，自動去搜尋符合倍率下的圖片，但要記得如果不加其他屬性去設定兩倍圖片的檔名，檔名就必須按照內建的規則，也就是atd-icon@2x.jpg，當然3x也依然支援，可以到官網看一下他的使用方式，但若是使用CSS設定的背景，依然沒辦法透過retina.js達到支援IE的效果。

以上三個方法提供目前在設計網頁時，對於Retina螢幕支援的做法，若在不考慮IE瀏覽器的情況下，其實方法1+方法2就已經可以解決所有情況，但若要支援IE則可以參考方法三的做法，也歡迎大家有問題可以留言進行討論。

方案四. 使用SVG圖檔

過往我們在網頁中使用的圖片僅有GIF、PNG、JPG這三種點陣圖格式，所以在高解析度（Retina）的螢幕中，我們需要輸入不同Size的圖片，來補足像素點不足的問題，現在有了另外一種解法“SVG”圖檔。

大家可以把SVG視為一種可以放在網頁上的向量圖檔，也就是說我們以前透過Illustrator或其他向量繪圖軟體（也包含Photoshop中向量工具）繪製出來的向量圖，本身放大就不會失真，但因為要放在網頁上，我們把它轉換成了前述的三種點陣格式，才導致圖檔放大後的失真，而SVG就是保留圖片原來的向量屬性，簡言之，就是把向量圖檔放在網頁上的意思。

非Retina螢幕
Retina螢幕

感覺這個解決方案應該會比前幾項方便，但也有他必須要注意的地方：

  1. 在SVG檔案中匯入的點陣圖，在儲存成SVG時並不會被向量化，例如上圖中間的ASUS Design Logo就是匯入的點陣圖（放大後還是會模糊）。
  2. SVG字型可能會遺失，所以需要使用網路字型或是將文字轉成外框或形狀之後再轉存成SVG。
字型遺失
轉換成外框或形狀

You may also like...

20,052 Responses

  1. Charitapisn表示:
    2022-09-2421:27:11

    online essay help
    custom essay writing company
    essay editor service

    回覆
  2. Alvinimave表示:
    2022-09-2421:17:08

    Amazing lots of superb advice!
    essays on writing https://essaypromaster.com/ custom resume writing

    回覆
  3. Wendelldub表示:
    2022-09-2419:58:23

    Amazing many of beneficial facts.
    canadian pharmacies-247 pharmacy discount prescription cost

    回覆
  4. Tkcyuk表示:
    2022-09-2419:38:41

    purchase avapro without prescription order pepcid 20mg for sale purchase famotidine sale

    回覆
  5. Jyokbn表示:
    2022-09-2419:32:11

    oral irbesartan irbesartan pills order famotidine 40mg generic

    回覆
  6. Charitapisn表示:
    2022-09-2416:05:50

    please help me write my essay
    write my admissions essay
    essay writing service legit

    回覆
  7. HaroldNails表示:
    2022-09-2415:22:15

    Что такое гибкие кабели?
    Самый простой кабель – это одножильный провод с пластиковой оболочкой.
    Он может гнуться и сохраняет этот изгиб – если вы не делаете это слишком часто, потому что иначе провод ломается.
    Такие простые кабели используются в домашних установках.
    После установки кабель остается нетронутым в течение десятилетий.
    Такие твердые провода не подходят для многих других применений, где кабели должны быть гибкими и эластичными.
    Здесь проводники в жилах состоят из нитей – пучков тонких проволок, которые можно сгибать миллионы раз, в зависимости от конструкции, не ломая и не теряя свойств тока или передачи данных.
    Одно из самых неприятных мест для кабеля – тяговая цепь. Здесь кабели питания, сервопривода и передачи данных расположены близко друг к другу и перемещаются вперед-назад по мере работы машины.
    Иногда со скоростью более пяти метров в секунду с ускорением, превышающим ускорение силы тяжести более чем в пять раз.
    Кабели проложены в тяговой цепи таким образом, что они изгибаются только в одном направлении.
    КГ 2х185-660

    回覆
  8. Vectmf表示:
    2022-09-2415:10:06

    irbesartan drug order irbesartan pill pepcid online

    回覆
  9. Brucetoush表示:
    2022-09-2411:06:28

    With thanks! An abundance of content!
    canadian pharmacy viagra top rated online canadian pharmacies mail order pharmacy

    回覆
  10. Alvinimave表示:
    2022-09-2410:33:22

    Thanks a lot. I enjoy this!
    how to write mba essays essay writing for kids pay for writing

    回覆
  11. Charitapisn表示:
    2022-09-2410:02:49

    persuasive essay helper
    essay writer
    essay writers toronto

    回覆
  12. Alvinimave表示:
    2022-09-2408:34:00

    You revealed this fantastically!
    great essay writers custom essay writing service reviews affordable essay writing service

    回覆
  13. Charitapisn表示:
    2022-09-2406:57:12

    best essay help review
    academic essay writing help
    order cheap essay online

    回覆
  14. Michaeljit表示:
    2022-09-2406:32:43

    new ed treatments cure ed

    回覆
  15. Wendelldub表示:
    2022-09-2406:13:22

    Cheers! Terrific information.
    cheap prescription drugs drugs from canada online canadian pharmacy cialis 20mg

    回覆
  16. Charitapisn表示:
    2022-09-2403:46:27

    community service essay sample
    do essay writing services work
    custom made essays

    回覆
  17. Badeogy表示:
    2022-09-2403:21:57

    order real dapoxetine http://dapoxe.com/ dapoxetine india buy dapoxetine online uae

    回覆
  18. molanlam表示:
    2022-09-2323:11:35

    На сайте https://vhods.com/ представлена информативная, качественная информация, детально описанная схема, которая поможет быстро и просто разобраться в том, как зайти в одну из самых популярных в России популярную сеть. Имеются картинки, полезные скриншоты, которые облегчат этот процесс. Они наглядно покажут то, как это правильно сделать. Представлены ценные советы, рекомендации от экспертов. Вся информация написана в простой, доступной форме, а потому зайти в профиль сможет даже ребенок.

    回覆
  19. Ashlenpisn表示:
    2022-09-2323:05:45

    persuasive essay writer
    automatic essay writer
    write my admissions essay

    回覆
  20. Alvinimave表示:
    2022-09-2321:55:58

    Cheers! Helpful information!
    learning to write essays steps to writing a good essay best cv writing services

    回覆
  21. Brucetoush表示:
    2022-09-2321:22:07

    Kudos! I enjoy it.
    canada pharmacy pharmacy near me discount prescription drug

    回覆
  22. Alvinimave表示:
    2022-09-2319:52:41

    You definitely made your point!
    essay writer review https://homeworkcourseworkhelps.com/ personal writers

    回覆
  23. Ashlenpisn表示:
    2022-09-2319:45:31

    admission essay service
    best custom essay writing
    admission essay editing services

    回覆
  24. Wendelldub表示:
    2022-09-2316:25:00

    Thanks, Ample data!
    prescription drug price comparison cheap prescription drugs us pharmacy no prior prescription

    回覆
  25. pg表示:
    2022-09-2314:56:30

    pg ยอดเยี่ยมเกมออนไลน์สล็อตบนมือถือแบบใหม่ปัจจุบันของโลกสมัครเล่น PG SLOT วันนี้ไม่มีเบื่อไม่ซ้ำซากในแบบการเล่นเดิมๆอีกต่อไปเป็นเกมสล็อตที่แจ๊คพอตแตกหลายครั้งที่สุดลองเลย

    回覆
  26. Ashlenpisn表示:
    2022-09-2314:12:28

    the best essay writing services
    college admission essay service
    top rated essay writing websites

    回覆
  27. HaroldNails表示:
    2022-09-2313:20:56

    Что такое гибкие кабели?
    Самый простой кабель – это одножильный провод с пластиковой оболочкой.
    Он может гнуться и сохраняет этот изгиб – если вы не делаете это слишком часто, потому что иначе провод ломается.
    Такие простые кабели используются в домашних установках.
    После установки кабель остается нетронутым в течение десятилетий.
    Такие твердые провода не подходят для многих других применений, где кабели должны быть гибкими и эластичными.
    Здесь проводники в жилах состоят из нитей – пучков тонких проволок, которые можно сгибать миллионы раз, в зависимости от конструкции, не ломая и не теряя свойств тока или передачи данных.
    Одно из самых неприятных мест для кабеля – тяговая цепь. Здесь кабели питания, сервопривода и передачи данных расположены близко друг к другу и перемещаются вперед-назад по мере работы машины.
    Иногда со скоростью более пяти метров в секунду с ускорением, превышающим ускорение силы тяжести более чем в пять раз.
    Кабели проложены в тяговой цепи таким образом, что они изгибаются только в одном направлении.
    КГ 1х95-0,38

    回覆
  28. free unique casino表示:
    2022-09-2313:13:57

    hawk play casino caesars free slots 777 card game slots free unique casino

    回覆
  29. Tplesj表示:
    2022-09-2312:36:00

    order desloratadine purchase mesalamine without prescription order mesalamine pills

    回覆
  30. Wyrjhm表示:
    2022-09-2312:25:13

    desloratadine 5mg over the counter etoricoxib 120mg canada mesalamine us

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。