[HTML] viewport 元標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

什麼是Viewport?

桌上型Safari瀏覽器與iOS上Safari瀏覽器對於viewport的定義是有點不同的。

桌上型Safari的viewport Safari on desktop viewport viewport在桌上型的Safari瀏覽器來說,其實指的就是可視區域(visible area)。無論使用者拉大或縮小視窗,viewport指的都是可視區域。
iOS上Safari的viewport

#1網頁放了一張320 x 356 pixels的圖,預設的情況下,viewport width會是980pixels,顯示如下:viewport default width 980 pixels

#2同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為1.0,顯示如下(佔滿):
viewport with width set to 320 pixels

#3同樣網頁有一張320 x x356 pixels的圖,將viewport width設為320pixels、scale設為1.5,顯示如下(放大1.5倍):
Viewport with width set to 320 and scale set to 150%

#4同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為0.5,顯示如下(縮小0.5倍,並以白色填滿):
Viewport with width set to 320 and scale set to 50%

#5使用者在做任何zoom in或zoom out等操作手勢時,會改變的是viewport的scale,並不會改變viewport的size:如下顯示:
Viewport with arbitrary user scale

viewport在ios Safari瀏覽器上可能會大於或小於可視區域(visible area),而iPhone及iPod touch的可視區域直擺為320 x 356pixels、橫擺為480 x 208pixels。如左圖各種狀況顯示。

 

使用Viewport Meta Tag

<!-- 設定viewport width等於device的寬度 -->
<meta name="viewport" content="width=device-width">
<!-- 設定初始縮放(scale)為1.0 -->
<meta name="viewport" content="initial-scale=1.0">
<!-- 設定初始縮放(scale)為2.3,且關閉使用者的縮放功能 -->
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

改變Viewport width

如果設計的網頁寬度是590pixels,則左圖在iOS的Safari看起來就會較窄,所以最好將viewport width設為590pixels,就會像右圖一樣看起來符合版面:

<meta name="viewport" content="width=590">

Webpage is too narrow for default settings

 

也可將viewport width設為device-width

<meta name="viewport" content="width=device-width">

Web application page is too small for default settings

參考資料:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

[HTML] <article>與<section>

<article>元素用來組織一個獨立的內容區域,例如部落格文章、雜誌頁面的每篇文章。

原文:The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
​Potential sources for the <article> element:Forum post、Blog post、News story、Comment. (資料來源)


<section>元素代表一般性的區域,例如部落格文章分成好幾個一般區域、網站也可分成好幾個一般性的組成區域。

原文:The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. (資料來源)


#1:將一個網頁分成好幾個一般性的組成區域(但不是很好的方式)

section排版

#2:將範例1改成較好的方式,並結合<article>

article與其它標籤的結合

以上有比較瞭解差異了嗎?<article>想像成是一篇部落格文章的話,裡面也可分成各一般性的區域(<section>即可派上用場)。

參考資料:
http://www.htmldog.com/guides/html/intermediate/sectioning/
http://www.w3schools.com/tags/tag_section.asp
http://www.w3schools.com/tags/tag_article.asp