支持HTML5的瀏覽器有Chrome該瀏覽器基于其他開源軟件撰寫，包括WebKit，目標(biāo)是提升穩(wěn)定性速度和安全性，并創(chuàng)造出簡單且有效率的使用者界面 Safari是蘋果計(jì)算機(jī)的操作系統(tǒng)Mac OS中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心 Edge微軟專門為新IE打造的引擎，速度快，目前已經(jīng)基于此引擎開發(fā)了；所以使用html5來開發(fā)，其成本低，開發(fā)周期短 2 屏幕適配好，能夠以一套代碼和資源，適配多種手機(jī)屏幕 3 編寫一次，處處運(yùn)行 統(tǒng)一的代碼能夠運(yùn)行在不同系統(tǒng)的設(shè)備上 4 對(duì)屏幕旋轉(zhuǎn)處理比較好，不用對(duì)屏幕旋轉(zhuǎn)進(jìn)行太多的處理 5 可通過和微信公眾平臺(tái)等其他公眾平臺(tái)接入，可以很方便打開 html5的劣勢1；要看你手機(jī)的瀏覽器支持不支持，一般主流的手機(jī)瀏覽器都支持的，opera和UC都是支持的；在電腦和手機(jī)上全屏顯示HTML5網(wǎng)頁的步驟如下1打開HTML5網(wǎng)頁代碼2在網(wǎng)頁頭部添加新代碼，使網(wǎng)頁寬度適應(yīng)設(shè)備寬度代碼如下3輸入代碼后，將包括圖片DIV在內(nèi)的圖片寬度設(shè)置為100%如何弄可以讓手機(jī)打開網(wǎng)頁的時(shí)候可以全屏顯示你要知道電腦屏幕的分辨率，或手機(jī)屏幕的分辨率才可以設(shè)置成全屏顯示如；1，輸入positionfixedtop0left0將整個(gè)div固定在屏幕的頂部和左側(cè)2輸入width100％height100％min－width1000px這個(gè)可以適合div的高度和寬度，而min－width是為了實(shí)現(xiàn)讓屏幕寬度在1000px以內(nèi)時(shí)，div的大小保持不變3輸入backgroundsize coverwebkitbackgroundsize；html5中自動(dòng)適應(yīng)手機(jī)屏幕高度的方法使用meta標(biāo)簽，這也是一種常用的方法metaname=viewportcontent=width=devicewidth，initialscale=10，minimumscale=10，maximumscale=10，userscalable=no解釋該標(biāo)簽的含義Height=devicewidth就是設(shè)置頁面的高度，也就是手機(jī)的高度HTML怎樣實(shí)現(xiàn)圖片在文字。

這個(gè)看支持什么屬性了， 因?yàn)樽鲇螒蛞玫膶傩员容^多，所以還是有一些經(jīng)驗(yàn) 支持很好的safari海豚 支持得還行的 海豚， 遨游， 天天， 原生22以上就不用說了，opera很一般支持的UC， ，海豚瀏覽器訪問html5網(wǎng)頁很流暢；有可能是CreateJS的問題，CreateJS在處理transform的時(shí)候依賴saverestore這樣開銷很大的操作，有些國產(chǎn)手機(jī)的配置很低，對(duì)這一類的支持不好HTML5的兼容是很好，但是僅限于4大主流瀏覽器Chrome， Firefox， Opera， Safari，其他的瀏覽器對(duì)標(biāo)準(zhǔn)的支持太不可靠了。

用iphone調(diào)試html5頁面的方法如下1打開手機(jī)web檢查器通過設(shè)置Safari高級(jí)Web檢查器打開見下圖點(diǎn)擊查看大圖，并且你會(huì)看到該選項(xiàng)下面對(duì)電腦操作的相應(yīng)描述，照做就好2 連接電腦Mac1先在手機(jī)Safari中打開你想調(diào)試的網(wǎng)頁，并用數(shù)據(jù)線連接到電腦 2再在電腦上打開；移動(dòng)端網(wǎng)站跟你的SSH無關(guān)，只要記住以下幾點(diǎn)就OK了 js前端框架 zepto， jqMobi， jquerymobile 三者可以選擇其一 個(gè)人推薦jqMobi DOM讀取是最快的 css部分，只需要兼容webkit內(nèi)核的就可以了 也就是用谷歌瀏覽器做測試要考慮windows phone的話 就在加寫一種兼容寫法咯html標(biāo)簽這部分其實(shí)就按pc端的；2你可以設(shè)置舞臺(tái)或者設(shè)備的屬性，舞臺(tái)裁剪為no，如果用的是短款手機(jī)觀看作品，有滾動(dòng)條也可以看到完整的案例3如果你想要實(shí)現(xiàn)完美適配，可以做三個(gè)設(shè)備，寬度均為640，高度可設(shè)置為1040iPhone6 plus1008iPhone5s和大部分Android手機(jī)832iPhone4s1HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備；html5頁面是和手機(jī)瀏覽器兼容的BootStrap響應(yīng)式開發(fā)開發(fā)手機(jī)端響應(yīng)式布局網(wǎng)站，適合移動(dòng)開發(fā)人員學(xué)習(xí)也就是響應(yīng)式開發(fā)；其次，HTML5在屏幕適配方面表現(xiàn)出色一套代碼和資源可以輕松適配多種手機(jī)屏幕尺寸，大大降低了跨設(shè)備開發(fā)的復(fù)雜性再者，編寫一次，處處運(yùn)行是HTML5的另一大優(yōu)點(diǎn)統(tǒng)一的代碼可以在不同操作系統(tǒng)設(shè)備上運(yùn)行，極大地提高了代碼的復(fù)用性此外，HTML5在處理屏幕旋轉(zhuǎn)時(shí)表現(xiàn)良好，無需過多考慮屏幕方向變化的。

制作HTML5頁面適應(yīng)不同設(shè)備尺寸的關(guān)鍵在于合理運(yùn)用meta標(biāo)簽CSS百分比法和CSS3 rem單位，以及媒體查詢技術(shù)以下是具體步驟與原理1 利用meta標(biāo)簽設(shè)置viewport元標(biāo)簽，初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁面不可縮放這有助于頁面在不同設(shè)備上保持原始比例2 百分比法C；可以的，如果你做的是pc端的話，那么看到的就是電腦的那種頁面，如果你做了移動(dòng)端的話，手機(jī)看到的就是手機(jī)的那種網(wǎng)頁；initialscale=10， userscalable=0， minimumscale=10， maximumscale=10quot ltmeta name=quotapplemobilewebappcapablequot content=quotyesquot ltmeta name=quotapplemobilewebappstatusbarstylequot content=quotblackquot ltmeta content=quottelephone=noquot name=quotformatdetectionquot。

另一個(gè)問題是，我們可能無法準(zhǔn)確地為每個(gè)分辨率范圍選擇合適的字體大小這可能導(dǎo)致設(shè)計(jì)效果不佳，需要我們不斷調(diào)整和優(yōu)化此外，前端開發(fā)人員在根據(jù)設(shè)計(jì)稿將元素的像素尺寸轉(zhuǎn)換為rem單位時(shí)，需要找到合適的基準(zhǔn)fontsize，這通常需要通過編寫代碼來實(shí)現(xiàn)考慮到上述問題，我們探討了三種HTML5適應(yīng)不同移動(dòng)設(shè)備。