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