手機友好模板

Question

我正在嘗試創建一個移動友好的網站，但我似乎無法讓我的基本模板正確。

http://jsfiddle.net/dvQqb/

模板必須是全屏，但不是所有的文字必須是小的，如我的HTC感覺（手機）顯示器。 所以它需要有100％的寬度，但不一定要像縮小它一樣。

Answer 1

默認情況下，移動瀏覽器通常會假設它正在加載專爲大屏幕設計的頁面，因此會進行尺寸假設，然後縮小整個文檔。

要告訴你，你的目標是自己的屏幕尺寸的手機瀏覽器，你需要添加視口元標記信息：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Answer 2

一個偉大的地方，開始是html5 Mobile Boilerplate。

爲什麼它是真棒

• 跨平臺兼容（Android裝置，iOS，黑莓，塞班）
• CSS類針對IE Mobile 7的
• 主屏幕上的圖標（Android，iOS設備Symbian）
• 針對Opera Mobile，Android，iOS，IE，Nokia，Blackberry的跨瀏覽器視口優化。
• 優化的視口縮放（Opera移動，Android，iOS設備的移動IE瀏覽器，黑莓）
• 選項來啓用iOS啓動屏幕在全屏模式下
• 更好的字體渲染上IE移動
• 適應性標記和CSS骨架
• CSS樣式表低端設備
• 移動站點地圖
• 移動MIME類型支持
• 生成用於移動
0123工具
• 修復iPhone迴流擴展錯誤