1. 沒(méi)有完整的想法和過(guò)程 



 就像做網(wǎng)站的過(guò)程。 如果你能了解它的流程，相信你不會(huì)覺(jué)得做一個(gè)手機(jī)網(wǎng)站難！ 真正的困難在于你沒(méi)有想法。  



 二、html5技術(shù)難測(cè) 



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



好了，說(shuō)了這么多，我們來(lái)說(shuō)說(shuō)如何開(kāi)發(fā)一個(gè) 手機(jī)網(wǎng)站！  



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



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



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



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



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



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



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



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



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



2. 快速上手



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



 缺點(diǎn)：



 1. 不遵循最佳實(shí)踐 



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



2。  Bootstrap 太重了 



 直接：CSS 和 JS 有點(diǎn)大。  CSS壓縮后115k，JS壓縮后35k



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



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



 h5開(kāi)發(fā)流程



 2.手寫(xiě)手機(jī)網(wǎng)站



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



這里詳細(xì)講解，使用添加meta標(biāo)簽制作移動(dòng)網(wǎng)站。  



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



1、添加視口標(biāo)簽





詳細(xì)屬性：



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

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

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

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

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

user-scalable ----- 用戶是否可以手動(dòng)縮放 

 viewport的詳細(xì)原理和知識(shí)點(diǎn)請(qǐng)百度！ 我不會(huì)在這里詳細(xì)解釋。  



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





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



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





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



4、iphone  private label 



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



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

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



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