移動設計CSS？

Question

我試圖通過使用不同的樣式表製作我的第一個移動網站，但我注意到它比我預期的要複雜。當我測試我的iPhone 4S和我妻子的機器人時，一切都非常不同。我需要用什麼來使它像Facebook的移動網站？你無法放大或縮小的地方，它只能放在你的屏幕上？

Answer 1

爲了確保您的網頁不需要被放大，加在你的HTML以下meta標籤：

<meta name="viewport" 
content="width=device-width, initial-scale=1.0; 
maximum-scale=1.0; user-scalable=0"></meta> 

它執行以下操作：視口的

• 寬度縮放到您設備的寬度（width=device-width）
• 初始和最大比例設置爲1.0
• 用戶s如果你正在尋找方法，讓您的網站順利移動設備的正常工作，平板電腦和桌面設備caling（縮放）被禁用

，關鍵詞是響應式設計（或響應網頁設計）。閱讀this article on A List Apart開始。對於一個非常流行的（非常類似Facebook的）響應式佈局，請參閱Twitter Bootstrap。對於高度移動優化的用戶界面組件，我真的建議看看jQuery Mobile。

Answer 2

看看蘋果的文檔Safari Developer Library。基本上你需要使用meta標籤來告訴瀏覽器你的網站是移動的。您也可以使用這些標籤自定義縮放縮放樣式和內容。

具體來說，你想

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> 

也許應該注意到，一些在Safari開發庫描述的東西只能在iOS設備上運行。不過，上面的代碼應該可以在Android和iOS上使用。