RWD 最佳夥伴:Viewport & Media query 

網頁顯示在手機上,預設會把整張網頁都秀出來,
想當然爾,一個 1024 px 寬的網頁,塞在 320 px 左右寬的手機螢幕下,
看起來就會小小的。

設定 viewport ,可以告訴瀏覽器,
在讀取 html 時要用多大的面積來顯示這張網頁。

其中最常見,就是將 viewport 設定為 device-width,
如此一來,就可以讓網頁用手機螢幕的寬度來呈現。

再搭配 media query 和 CSS 的設定,就能讓同一張網頁,
在桌面及手機上都可以有相對應的良好體驗。

 

Viewport 語法

<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1,user-scalable=no" >


width:可設定數值,或者指定為device-width
height:可設定數值,或者指定為device-height
initial-scale:第一次進入頁面的初始比例
minimum-scale:允許縮小最小比例
maximum-scale:允許放大最大比例
user-scalable:允許使用者縮放,1 or 0 (yes or no)

 

screen-width? device-width?

螢幕解析與裝置寬度不一定是一致的。
以 iPhone5 來說,螢幕解析度是 960,但寬度是 320。
若不希望網頁在手機上看起來是小小的,還是以裝置寬度才能達到目的。

 

Media queries 

在現今這種多裝置瀏覽雲端及網頁的時代,
電腦已不再是惟一的選項,手機、平板、筆電...等等,
都可能是使用者會用來瀏覽內容的工具。

透過 Media Queries 的語法設定,則可以讓網頁在各種不同裝置之間,
都能有相因應的最佳佈局呈現。
 

 

 

 

 

參考來源:

 

Kirororo 發表在 痞客邦 PIXNET 留言(0) 人氣()