響應式設計必學!設定螢幕寬度
  類別:  網頁程式設計
  書號:  ACL042800
  作者:  陳惠貞
  回線上練功房

在進行網頁設計時,就不能只考慮到螢幕解析度,還必須兼顧螢幕尺寸。
viewport 指的是螢幕解析度,iOS 和Android 3.X 以上版本內建的瀏覽器將viewport 的寬度預設為980 像素,而桌上型電腦的viewport 則是設定為瀏覽器畫面。當我們將viewport 設定為裝置的螢幕解析度時,解析度的大小將會影響所顯示的範圍,如圖( 一)、圖( 二) 是分別在iPad Air 和iPad Mini 顯示相同照片的結果。

為了讓相同項目的內容在不同尺寸和不同解析度的螢幕上看起來差不多,於是衍生出density ( 密度) 的概念,只要根據density 來設定viewport,也就是將螢幕解析度除以density,就可以在不同尺寸和不同解析度的螢幕上顯示相同項目的內容,以下列出一些行動裝置的螢幕規格供參考。

回應式網頁設計的重點之一是要根據density 來設定viewport,可以在HTML 文件中加入第06 行的 <meta> 元素,將viewport 設定為裝置的螢幕寬度。

 

關於碁峰隱私權政策聯絡我們     檢視 : PC 版  手機版
碁峰資訊股份有限公司 GOTOP INFORMATION INC.
台北市南港區三重路66號7樓之6 / 7F.-6,No.66,Sanchong Rd.,Nangang District,Taipei
TEL:(02)2788-2408 FAX:(02)8192-4433 劃撥帳號:14244383
Copyright 2014© GOTOP Information Inc, All Rights Reserved 請勿任意連結、轉載