響應式設計-簡易圖片處理

RWD 系列文章 》

圖片在不同尺寸的螢幕上呈現,必須考慮解析度的問題,高解析大尺寸螢幕上顯示的大型圖片,並不適用手機等小尺寸螢幕裝置,要讓網頁上呈現的圖片適合各種尺寸的裝置,比較好的作法是準備數種不同尺寸的圖片,然後根據螢幕寬度進行呈現。

假設有一張大尺寸圖片 IMGP0403.jpg,其大小為 2048✕1536,為了在各種尺寸的螢幕上以合適的尺寸呈現,我們準備了數種不同大小的圖片,並且命名如下:

圖片檔案
(原圖)IMGP0403.jpg
20481536
IMGP0403_1200.jpg
1200900
IMGP0403_1000.jpg
1000750
IMGP0403_800.jpg
800600
IMGP0403_600.jpg
600450
IMGP0403_400.jpg
400300

接下來在網頁中配置一個 img 標籤,並透過 JavaScript 根據螢幕寬度指定所要套用的圖片。撰寫以下的程式碼:

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<meta name="viewport"  content="width=device-width" />
<title></title>
</head>
<body  style="margin:0;padding:0;">
    <img id="viewt" />
    <script>
        var width = window.innerWidth; //取得目前螢幕寬度

    //根據寬度指定所要呈現的圖片
        var imgpath =
            width > 1600 ? "IMGP0403_1200.jpg" :
            (width > 1000 ? "IMGP0403_1000.jpg" :
            (width > 800 ? "IMGP0403_800.jpg" :
             width > 600 ? "IMGP0403_600.jpg" : "IMGP0403_400.jpg"));

        document.getElementById('viewt').src = 'images/view/' + imgpath;
    </script>
</body>
</html>

其中首先取得目前的螢幕寬度,接下來根據 width 設定所要使用的圖片檔案 imgpath,最後將結合路徑字串,設定給畫面上 img 元素之 src 屬性。以下是在寬度為 1680 的螢幕上呈現的畫面:

圖片上標示的數字為此圖片的尺寸,而於螢幕寬度超過了 1600 ,因此套用 IMGP0403_1200.jpg 這張圖片,以下為筆者手機4吋螢幕所顯示的畫面:

透過 window.innerWidth 屬性的判斷是很粗造的作法,但是在一般的瀏覽器或是Android手機上幾乎都可以作正確的判斷。

RWD 系列文章 》


沒有留言: