[HTML] 大圖縮小圖是行不通的

昨日因為要做一個簡單的logo,所以做了以下這張圖,大小為144px正方形,我用PS製作:
(原圖144px正方形)
apple-touch-icon-144                   

再來我想改成其它尺吋,以再特定用途時,可以切換不同尺吋的圖,所以從原圖(144px正方形)直接用更改圖片大小的方式,改成分別是114px正方形、72px正方形、57px正方形各自的圖檔來輸出:以下依序

(114px正方形)                                      (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-114                                  apple-touch-icon-114

(72px正方形)                                        (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-72                                             apple-touch-icon-72

(57px正方形)                                         (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-57                                                  apple-touch-icon-57

發現:
1、字母、四周圓角在直接使用圖片縮尺吋的方式,開始有模糊、鋸齒狀出現。
2、色差上精緻度也被破壞掉。

所以我想還是要先設定好尺吋再重新製作才行、或者使用向量式類型的軟體來製作。
我不是視覺設計師,只是一些心得,分享給客倌們。

[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