1. Iphone手機(jī)網(wǎng)頁(yè)設(shè)計(jì)1.1 設(shè)置viewpoint，固定顯示頁(yè)面
當(dāng)我們?cè)赟afari中打開(kāi)一個(gè)網(wǎng)站時(shí)，默認(rèn)情況下會(huì)縮放顯示網(wǎng)頁(yè)，而這會(huì)影響Web App的體驗(yàn)，所以通過(guò)以下代碼來(lái)關(guān)閉縮放：
<meta name = “viewport” content = “user-scalable=no, width=device-width”>
屬性的介紹：
user-scalable – 用戶是否可以手動(dòng)縮放；
width – 定義viewport寬度(默認(rèn)為980像素) ，例子中值為device-width是指設(shè)置為設(shè)備顯示寬度；
height – viewport的高度；
initial-scale – 初始的縮放比例 (范圍從 0 到10)；
minimum-scale – 允許用戶縮放到的最小比例；
maximum-scale – 允許用戶縮放到的最大比例；
1.2 允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"到底是怎么做到的？其實(shí)并不難。
首先，在網(wǎng)頁(yè)代碼的頭部，加入一行 viewport 元標(biāo)簽。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport 是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的 100%。
所有主流瀏覽器都支持這個(gè)設(shè)置，包括 IE9。對(duì)于那些老式瀏覽器（主要是 IE6、7、8），需要使用css3-mediaqueries.js。
1.3 不使用絕對(duì)寬度
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要。
具體說(shuō)，CSS 代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
1.4 相對(duì)大小的字體
字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的 100%，即 16 像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默認(rèn)大小的1.5倍，即 24 像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small 元素的大小是默認(rèn)大小的0.875倍，即 14 像素（14/16=0.875）。
1.5 流動(dòng)布局（fluid grid）
"流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float 的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向 overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。
另外，絕對(duì)定位（position: absolute）的使用，也要非常小心。
1.6 選擇加載 CSS
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心，就是 CSS3 引入的 Media Query 模塊。
它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的 CSS 文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
上面的代碼意思是，如果屏幕寬度小于 400 像素（max-device-width: 400px），就加載 tinyScreen.css 文件。
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
如果屏幕寬度在 400 像素到 600 像素之間，則加載 smallScreen.css 文件。
除了用 html 標(biāo)簽加載 CSS 文件，還可以在現(xiàn)有 CSS 文件中加載。
@import url ("tinyScreen.css") screen and (max-device-width: 400px);
1.7 CSS 的@media 規(guī)則
同一個(gè) CSS 文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的 CSS 規(guī)則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小于 400 像素，則 column 塊取消浮動(dòng)（float:none）、寬度自動(dòng)調(diào)節(jié)（width:auto），sidebar 塊不顯示（display:none）。
1.8 圖片的自適應(yīng)（fluid image）
除了布局和文本，"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。
這只要一行 CSS 代碼：
img { max-width: 100%;}
這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫成：
img, object { max-width: 100%;}
老版本的 IE 不支持 max-width，所以只好寫成：
img { width: 100%; }
此外，windows 平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用 IE 的專有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte 的 imgSizer.js。
addLoadEvent (function () {
var imgs = document.getElementById ("content") .getElementsByTagName ("img");
imgSizer.collate (imgs);
});
不過(guò)，有條件的話，最好還是根據(jù)不同大小的屏幕，加載不同分辨率的圖片。有很多方法可以做到這一條，服務(wù)器端和客戶端都可以實(shí)現(xiàn)
2. 小屏幕移動(dòng)設(shè)備網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)補(bǔ)充：
1.1 網(wǎng)站頭(header)
考慮到小屏幕移動(dòng)設(shè)備的一些特性，設(shè)計(jì)網(wǎng)頁(yè)時(shí)，有些可以去掉網(wǎng)站頭（包括LOGO、全局導(dǎo)航什么的）。
比如flick的查看大圖頁(yè)面就去掉了網(wǎng)站頭。
設(shè)計(jì)原則：“針對(duì)于小屏幕移動(dòng)設(shè)備的界面設(shè)計(jì)，在某些指定任務(wù)的界面，應(yīng)優(yōu)先于讓用戶關(guān)注當(dāng)前任務(wù)，而不是應(yīng)用程序本身。”
2.1 鏈接聚焦（hover）
各個(gè)瀏覽器均自定義了鏈接的hover樣式，比如有的瀏覽器給鏈接聚焦時(shí)加了邊框，有的瀏覽器給鏈接聚焦時(shí)加個(gè)背景色之類。因此小屏幕移動(dòng)設(shè)備網(wǎng)頁(yè)不需要在CSS中編寫hover樣式。
2.2 鼠標(biāo)事件（mouseover）
考慮到觸摸屏操作，用戶無(wú)法用手指進(jìn)行over的操作，因此應(yīng)禁止在應(yīng)用于移動(dòng)設(shè)備訪問(wèn)的網(wǎng)頁(yè)使用mouseover。
3. UC瀏覽器相關(guān)（由于UC升級(jí)頻繁 以下不支持的說(shuō)法僅限于UC7.6以下版本）
UC瀏覽器相對(duì)于其他手機(jī)瀏覽器而言，對(duì)HTML標(biāo)簽和CSS屬性存在有特殊的、自定義的處理方式。
在實(shí)際開(kāi)發(fā)中，我們發(fā)現(xiàn)了UC瀏覽器對(duì)CSS存在一些“特殊照顧”：
不支持font-family屬性，也就是說(shuō)，在UC瀏覽器你只能看到一種字體；
不支持font-szie屬性，也就是說(shuō)，在UC瀏覽器你只能看到一樣大小的字體；
不支持width、height、padding、margin、line-height屬性，也就是說(shuō)，在UC瀏覽器只能通過(guò)p、br等HTML標(biāo)簽來(lái)?yè)Q行以達(dá)到字符上下間隔；
不支持固定像素的寬度，100%顯示頁(yè)面，也就是說(shuō)，在UC瀏覽器始終將看到的是“滿屏的”；
不支持浮動(dòng)、層疊布局，float和position屬性無(wú)效，也就是說(shuō)，在UC瀏覽器你只能看到“左對(duì)齊”。
支持background-color，但不支持background-image，也就是說(shuō)不支持CSS背景圖顯示，在UC瀏覽器你只能看到背景色。
4. XHTML手機(jī)支持相關(guān)
5.1 大多數(shù)手機(jī)不支持的：
表單元素的“disable”屬性
部分手機(jī)不支持的：
“button”標(biāo)簽
“input[type=file]“標(biāo)簽
“iframe”標(biāo)簽。
雖然只有部分手機(jī)不支持這幾個(gè)標(biāo)簽，但因?yàn)檫@些標(biāo)簽在頁(yè)面中往往具有非常重要的功能，所以屬于高危標(biāo)簽，要謹(jǐn)慎使用。
少數(shù)手機(jī)不支持的：
“select”標(biāo)簽：該標(biāo)簽如果被賦予比較復(fù)雜的CSS屬性，可能會(huì)導(dǎo)致顯示不正常，比如”vertical-align:middle”。
CSS部分
4.1 大部分手機(jī)不支持的：
“font-family”屬性：因?yàn)槭謾C(jī)基本上只安裝了宋體這一種中文字體；
“font-family:bold;”：對(duì)中文字符無(wú)效，但一般對(duì)英文字符是有效的；
“font-style: italic;”：同上；
“font-size”屬性：比如12px的中文和14px的中文看起來(lái)一樣大，當(dāng)字符大小為18px的時(shí)候你也許能看出來(lái)一些區(qū)別；
“white-space/word-wrap”屬性：無(wú)法設(shè)置強(qiáng)制換行，所以當(dāng)你網(wǎng)頁(yè)有很多中文的時(shí)候，需要特別關(guān)注不要讓過(guò)多連寫的英文字符撐開(kāi)頁(yè)面；
“background-position”屬性：但背景圖片的其他屬性設(shè)定是支持的；
“position”屬性；
“overflow”屬性；
“display”屬性；
“min-height”和”min-weidth”屬性；
4.2 部分手機(jī)不支持的：
“height”屬性：對(duì)”height”的支持不太好，奇怪的是在我們的測(cè)試當(dāng)中，僅僅只有很少部分手機(jī)不支持”width”屬性；
“pading”屬性
“margin”屬性：更高比例的手機(jī)不支持”margin”的負(fù)值。
4.3 少數(shù)手機(jī)不支持的：
少數(shù)手機(jī)對(duì)CSS完全不支持；
5. 個(gè)人曾遇到的問(wèn)題解決方案
手機(jī)網(wǎng)頁(yè)設(shè)計(jì)怎么控制在不同的手機(jī)上顯示的字體大小自動(dòng)變化？
- 允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整：
首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。
<meta name="viewport"content="width=device-width, initial-scale=1"/>
viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。
- 不使用絕對(duì)寬度：只能指定百分比寬度：width: xx%;
- 相對(duì)大小的字體：字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大小（em）。