1. 沒有完整的想法和過程 



 就像做網(wǎng)站的過程。 如果你能了解它的流程，相信你不會覺得做一個手機網(wǎng)站難！ 真正的困難在于你沒有想法。  



 二、html5技術(shù)難測 



 看來學(xué)習(xí)用html5+css3做手機網(wǎng)站就等于學(xué)習(xí)了頂級武功。 其實你錯了！ 不要過多考慮 html5。 其實做手機網(wǎng)站的話，是不會真正用上html5的強大功能的。  （也許對于一些不懂技術(shù)的新手來說：你的手機網(wǎng)站是用HTML5+CSS3做的，太棒了！你可以使用互聯(lián)網(wǎng)上最新最前沿的技術(shù)。其實，有眼光的人看的時候 ，我知道是用什么技術(shù)來做的。俗話說：“外行看熱鬧，內(nèi)行看門道”）



好了，說了這么多，我們來說說如何開發(fā)一個 手機網(wǎng)站！  



 主要開發(fā)手機網(wǎng)站，大致可以分為兩類。 一是用框架開發(fā)移動網(wǎng)站。 一種是自己手寫的手機網(wǎng)站。  



1。 移動網(wǎng)站開發(fā)框架



 常用的開發(fā)框架有：目前最流行的web前端框架（BootStrap），Jquery mobile..當然可能還有一些移動開發(fā)我沒研究過 這些詳細。  



 為什么 BootStrap 是最火的前端開發(fā)框架？  



 因為bootstrap自帶響應(yīng)式布局（網(wǎng)格系統(tǒng)），可以實現(xiàn)移動設(shè)備優(yōu)先的原理。  



 使用bootstrap開發(fā)網(wǎng)站有什么好處？  



1。 如果你不懂設(shè)計，你可以建立一個網(wǎng)站。  



 即使你不懂設(shè)計，在 Bootstrap 的幫助下，你的網(wǎng)頁也可以擁有極好的外觀。 其強大的內(nèi)置樣式庫使您的工作令人驚嘆。  



 主要體現(xiàn)在：bootstrap自帶的字體文件和UI樣式。  （為不懂UI設(shè)計的程序員提供了好消息）



2. 快速上手



 可以專心解決問題，繁瑣的細節(jié)交給Bootstrap去操心。 一次開發(fā)，可適配所有終端，可快速上手搭建網(wǎng)站原型。它還提供了很多豐富的插件。 就算不懂JS，也能基本了解常用的API。 對網(wǎng)站的影響基本可以解決。  



 缺點：



 1. 不遵循最佳實踐 



 我們在使用 Bootstrap 時遇到的最大問題之一就是你的 DOM 元素會被大量的 類。 這打破了良好網(wǎng)頁設(shè)計的基本規(guī)則之一，HTML 不再具有語義，內(nèi)容和表現(xiàn)不再分離。 前端純粹主義者會覺得這很煩人，認為這給可擴展性、可重用性和可維護性帶來了更大的挑戰(zhàn)。  



2。  Bootstrap 太重了 



 直接：CSS 和 JS 有點大。  CSS壓縮后115k，JS壓縮后35k



 如果你想使用Bootstrap的所有功能，你應(yīng)該仔細考慮資源加載時間。 當然，這對某些地方來說可能不是問題，但在新西蘭，互聯(lián)網(wǎng)要跨越太平洋，此時數(shù)據(jù)到達那里會很慢。 因此，請考慮您的目標市場。  



 我相信任何框架都有其優(yōu)點和缺點。 沒有完美的產(chǎn)品，請根據(jù)您的實際情況選擇。 至于其他一些框架，我暫時不做過多解釋。 相信只要你愿意百度，都能找到你想要的答案。  



 h5開發(fā)流程



 2.手寫手機網(wǎng)站



 一般我們手工開發(fā)一個手機網(wǎng)站，基本上可以分為兩類。 一種是通過在網(wǎng)頁頭部添加meta標簽來實現(xiàn)的（網(wǎng)頁指的是要開發(fā)的html5格式）。 另一種是通過 CSS3 媒體標簽（媒體查詢）實現(xiàn)的。 不了解媒體查詢的朋友可以看看這篇文章：響應(yīng)式布局。  



這里詳細講解，使用添加meta標簽制作移動網(wǎng)站。  



 基本上我們只需要在網(wǎng)頁頭部添加四個meta標簽就可以實現(xiàn)一個移動網(wǎng)站框架。 讓我看看有哪些元標記。  



1、添加視口標簽





詳細屬性：



width----視口的寬度（width=device-width表示：寬度等于設(shè)備的寬度）

height ------ 視口的高度（height=device-height 表示：高度等于設(shè)備的寬度）

  initial-scale ----- 初始縮放比例 

minimum-scale ----- 允許用戶縮放到的最小比例 

maximum-scale ----- 最大縮放比例 user is allowed to scale to 

user-scalable ----- 用戶是否可以手動縮放 

 viewport的詳細原理和知識點請百度！ 我不會在這里詳細解釋。  



2。 禁止將號碼轉(zhuǎn)為電話號碼。  





 一般IOS和Android系統(tǒng)都會默認一定長度以內(nèi)的號碼作為手機號碼，即使不添加也會默認顯示為手機，所以，取消 這！  



3、iphone設(shè)備中的safari私有meta標簽 





 意思是：允許全屏模式瀏覽，隱藏瀏覽器導(dǎo)航欄 



4、iphone  private label 



指定iphone中safari頂部狀態(tài)欄的樣式 



 默認值為default（白色），可以設(shè)置為黑色（黑色 ) 和 black-translucent (gray translucent) ) [H]

 還有一個個性化的鏈接標簽，可以讓用戶在創(chuàng)建網(wǎng)頁的時候創(chuàng)建一個桌面快捷方式，它的圖標變成我們自己定義的圖標 . 比如手機騰訊網(wǎng)站上的標簽：



 但是騰訊并沒有規(guī)范這個png圖標的命名。 一般我們要求文件名是apple-touch-icon.png或者apple-touch-icon-precomposed .png，前者的命名iOS會自動給這個圖標添加圓角、陰影和高光疊加，而后者不會 添加這些效果。