建立網站以正確顯示在智能手機上時，我應該記住哪些要點？

Question

我打算使用xhtml，css，javascript和php構建一個網站。這個網站應該正確地出現在iPhone和其他類型的智能手機上，就像它會出現在計算機上一樣，所以我想知道當我開始建立這樣的網站時，我應該記住哪些要點。

Answer 1

1）使用<meta name="viewport">標籤正確設置規模，使您的內容填滿屏幕

2）避免內部滾動，如I幀或的div overflow:scroll因爲這些地方不要iOS4的工作和更早版本，或Android的

3）避免position:fixed的大多數版本的引腳導航屏幕，因爲這特定部分上的iOS4不工作和更早版本，或大部分Android版本

的

4）不要依賴懸停或鼠標懸停基於下拉菜單的交互在鼠標懸停時出現，因爲這些功能在基於觸摸的設備上無法正常工作或根本無法正常工作

5）避免小文本或鏈接緊密相連，因爲如果您的頁面寬度爲800像素且縮小到320像素，這些將很難閱讀或點擊。

6）不要使用閃光燈

更普遍，你有如何處理這樣的選擇：

1）使一個單一的網站設計有漂亮的大文本，可以在縮放時得到很好的運用到小屏幕

2）設計兩種佈局爲您的網站和使用JavaScript或CSS媒體解析查詢到移動和桌面版本之間切換樣式表，或

3）做一個所謂的液體佈局，其中寬度可以中平滑地縮放不同的屏幕大小，而不進行縮放

Answer 2

您應該：

1. 讓你的智能手機更具體的名單。它們中有很多，基本上不可能在每個設備上創建高級互動網站，這些設備至少符合智能手機的一個定義。
2. 不斷測試在設備上，即使官方模擬器不能正常工作（我相信蘋果建議在設備上測試，而不是依靠他們的模擬器）。
3. 注重使用JavaScript事件，如click或hover腳本 - 他們可能對你的目標設備更爲複雜（例如touchstart，touchend，touchmove僅舉幾例），並確保你把觸摸功能的事件考慮在內。

如果你已經定義了你的目標手機，你可以檢查是否例如。一些移動JavaScript框架可以滿足您的需求（例如Sencha，但是我發現它至少在我測試過的一款Symbian手機型號上不起作用）。

您還應該檢查兼容性表格，以顯示您想要使用哪個特定功能的智能手機&瀏覽器。這應該爲你節省很多時間。