漁家小舖七嘴八舌論壇

 取回密碼
 註冊
搜尋
熱搜: Redump discuz
檢視: 328|回覆: 0

【教學】使用 Veiwport 設定手機網頁的螢幕解析度

[複製連結]
發表於 2022年5月31日 15:38:59 | 顯示全部內容 |閱讀模式
隨著近年來智慧型手機的普及化,使用智慧型手機上網的人口數日益增加,家家戶戶對於手機網頁 Mobile Web 的設計需求也就越來越多了,在開始設計手機網頁時,第一件事情就是要設定 viewport 調整手機瀏覽器的螢幕解析度。

由於智慧型手機是屬於超小型的螢幕,如何在這麼小的螢幕之內調整適合使用者的閱讀解析度,為此 W3C 在 HTML 制定了給手機網頁 Mobile Web 使用的 Viewport 螢幕解析度設定的語法 ,寫法如下。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>


以 iPhone 手機為例,開啟 Safari 瀏覽網頁時,他的 Safari 瀏覽器的螢幕初始寬度設定是 980px , 在小小的 3.5 吋螢幕中要呈現出 980px 的網頁,實在是太小了,使用者跟本就無法舒適地閱讀這麼小的文字。

當這個網頁是要設計成手機版的網頁時,我們就要在網頁的 HTML 之內寫上 viewport 語法,調整手機瀏覽器的螢幕解析度,才能讓使用者得到較舒適的閱讀狀態,如下圖 HTML 語法中的第 5 行。

https://www.fishman.idv.tw/phpforum/thread-20163-1-1.html

在網頁裡面寫好 viewport 語法之後,再一次使用手機打開這個網頁來看看,果然,螢幕解析度呈現最佳閱讀的狀態,文字大小適中,看起來真的就舒服多了。

Viewport 屬性說明:
width=device-width

有些教學文章上面會寫成 width=320 就是將手機瀏覽器的螢幕解析度設定為 320px,這個大小在 iPhone 就是 他的 viewport 預設值,所以在 iPhone 上面看起來就是剛剛好的,但是,這 2 年來手機螢幕越做越大,有些手機螢幕做到 4 吋以上,甚至有些還做到 5 吋以上,手機螢幕變大了,他們的 viewport 預設值也就會大於 320px ,由於手機的品牌太多了,我們的網頁沒辦法為每一台手機都設定成不同的 viewport ,因此,我們就只要設定為 width=device-width 就可以自動符合所有不同手機螢幕他們自己的預設最佳解析度。

initial-scale=1

設定手機螢幕畫面的初始縮放比例為 100%。

width設定畫面寬度
height設定畫面高度
initial-scale設定畫面的初始縮放比例
minimum-scale設定畫面的最小縮放比例
maximum-scale設定畫面的最大縮放比例
user-scalable設定是否允許使用者改變縮放比例



通常,在大部份的情況,只要設定 width=device-width, initial-scale=1.0 這兩個就可以了,其他幾個屬性比較少會被用到。
懶得打字嗎?讓本助手協助你 【使用進階編輯器請點選右方進階模式】
您需要登入後才可以回覆 登入 | 註冊

本版積分規則

手機版|漁家小舖

GMT+8, 2022年8月19日 13:25 , Processed in 0.181121 second(s), 17 queries , Gzip On, Redis On.

© 2001-2022 Powered by Discuz! X3.4


快速回覆 返回清單