這篇文章主要介紹了HTML5 移動(dòng)頁(yè)面自適應(yīng)手機(jī)屏幕四類(lèi)方法總結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下1使用meta標(biāo)簽viewportH5移動(dòng)端頁(yè)面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng) viewport；在h5中，你body的width和height木有固定在不同分辨率的手機(jī)上body的width和height是不一樣的就是橫屏和豎屏；手機(jī)頁(yè)面最好不要用實(shí)打?qū)嵉膶挼膩?lái)寫(xiě)，不同手機(jī)上面的寬度顯示是不同的百分比是最好的選擇，或者你寫(xiě)成響應(yīng)式。

lt，其次你要把頁(yè)面中的寬度修改為百分比width=devicewidth ，也就是@mediainitialscale=1quot解決方案2建議你看一下網(wǎng)上的教程或者案例，自己對(duì)比學(xué)習(xí)再寫(xiě)建議如果是小白的話(huà)，要不然不會(huì)自適應(yīng)屏幕大小的，只要你編寫(xiě)的html代碼符合html5規(guī)則就行html5不是轉(zhuǎn)化的，建議你看一下html5標(biāo)簽；H5頁(yè)面，即HTML5頁(yè)面，是隨著移動(dòng)互聯(lián)網(wǎng)的普及而興起的一種網(wǎng)頁(yè)技術(shù)以下是關(guān)于H5頁(yè)面的詳細(xì)解釋一H5頁(yè)面的基本特點(diǎn) H5頁(yè)面主要基于HTML5標(biāo)準(zhǔn)開(kāi)發(fā)，具有跨平臺(tái)多媒體支持等特性與傳統(tǒng)的PC端網(wǎng)頁(yè)不同，H5頁(yè)面更加注重在移動(dòng)設(shè)備上的展示效果，能夠自適應(yīng)各種屏幕尺寸和分辨率，為用戶(hù)提供良好的瀏覽；H5的尺寸一般設(shè)計(jì)為640x1136px 既滿(mǎn)足了顯示需求，又能降低用戶(hù)加載圖片需要的帶寬可以用各種分辨率的移動(dòng)智能手機(jī)查看我們?cè)O(shè)計(jì)的H5頁(yè)面時(shí)，當(dāng)然，也會(huì)出現(xiàn)如下的情況，內(nèi)容顯示不全，甚至一些重要內(nèi)容和按鈕都會(huì)被遮擋第一背景圖片必須采用backgroundsizecover來(lái)實(shí)現(xiàn)第二我們?cè)谶M(jìn)行H5頁(yè)面內(nèi)容規(guī)；一般來(lái)說(shuō)，iH5的手機(jī)案例默認(rèn)的尺寸是640*1040px，也就是iPhone6 plus的尺寸，我用的正是iPhone6 plus，所以我做案例時(shí)沒(méi)出現(xiàn)過(guò)這類(lèi)問(wèn)題，而你遇到案例呈現(xiàn)不完整的情況我想應(yīng)該是手機(jī)型號(hào)的不同導(dǎo)致的你可以設(shè)置舞臺(tái)或者設(shè)備的屬性，舞臺(tái)裁剪為no，如果用的是短款手機(jī)觀(guān)看作品，有滾動(dòng)條也可以看到；1一般來(lái)說(shuō)，iH5的手機(jī)案例默認(rèn)的尺寸是640*1040px，也就是iPhone6 plus的尺寸，你遇到案例呈現(xiàn)不完整的情況應(yīng)該是手機(jī)型號(hào)的不同導(dǎo)致的2你可以設(shè)置舞臺(tái)或者設(shè)備的屬性，舞臺(tái)裁剪為no，如果用的是短款手機(jī)觀(guān)看作品，有滾動(dòng)條也可以看到完整的案例3如果你想要實(shí)現(xiàn)完美適配，可以做三個(gè)設(shè)備，寬度；HTML5的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)稿，通常情況下，內(nèi)容區(qū)為750px或960px或者1080px的，一般不小于750px像素大小寬度設(shè)計(jì)稿可以比750px大，但是絕對(duì)不能比750px小，這個(gè)主要是由于當(dāng)前手機(jī)的分辨率相對(duì)較高iPhone6是375物理像素，但實(shí)際像素為其兩倍，也就是750，這個(gè)750就是這么來(lái)的如果設(shè)計(jì)圖稿過(guò)小，前端。

HTML5的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)稿，通常情況下，內(nèi)容區(qū)為750px或960px或者1080px的，一般不小于750px像素大小寬度設(shè)計(jì)稿可以比750px大，但是絕對(duì)不能比750px小，這個(gè)主要是由于當(dāng)前手機(jī)的分辨率相對(duì)較高iPhone 6是375物理像素，但實(shí)際像素為其兩倍，也就是750，這個(gè)750就是這么來(lái)的如果設(shè)計(jì)圖稿過(guò)小，前；你寫(xiě)的這段是要放在所有css樣式后邊的，以防止樣式覆蓋這段的意思是在電腦屏或者其他屏上你顯示的是一個(gè)樣式，通過(guò)這個(gè)監(jiān)控屏幕大小，等屏幕大小改變，則替換成另一個(gè)樣式media screen and maxwidth 480px 設(shè)置手機(jī)屏寬度不大于 480px時(shí)的樣式 divMain 想在手機(jī)屏上更改的樣式；很簡(jiǎn)單，在頭部加個(gè) ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot。

移動(dòng)端H5指的是在手機(jī)瀏覽器上運(yùn)行的H5頁(yè)面，H5全稱(chēng)為HTML5，是HTML新一代標(biāo)準(zhǔn)的簡(jiǎn)稱(chēng)H5技術(shù)可以在手機(jī)端上實(shí)現(xiàn)更流暢更豐富的交互體驗(yàn)，因此被廣泛應(yīng)用于移動(dòng)互聯(lián)網(wǎng)應(yīng)用開(kāi)發(fā)中為什么移動(dòng)端H5如此重要隨著移動(dòng)設(shè)備的普及，越來(lái)越多的應(yīng)用需要在手機(jī)瀏覽器上來(lái)實(shí)現(xiàn)移動(dòng)端H5可以為用戶(hù)提供更好的；1，輸入positionfixedtop0left0將整個(gè)div固定在屏幕的頂部和左側(cè)2輸入width100％height100％min－width1000px這個(gè)可以適合div的高度和寬度，而min－width是為了實(shí)現(xiàn)讓屏幕寬度在1000px以?xún)?nèi)時(shí)，div的大小保持不變3輸入backgroundsize coverwebkitbackgroundsize；寫(xiě)手機(jī)頁(yè)面確實(shí)是內(nèi)容要比瀏覽器的內(nèi)容縮小12來(lái)寫(xiě)，這樣顯示才正常不過(guò)寫(xiě)手機(jī)頁(yè)面最好不要寫(xiě)絕對(duì)寬高度，都是用百分比來(lái)寫(xiě)的這樣就不會(huì)出現(xiàn)尺寸不合了比如一個(gè)商品在設(shè)計(jì)稿上占去15的寬高度，那么你就在編輯器給這個(gè)元素寬高15%的寬高度邊距慢慢調(diào)整。