移動端h5開發(fā)(新手開發(fā)移動端H5頁面有哪些注意事項)
1.新手開發(fā)移動端 H5 頁面有哪些注意事項
1、首先我們來看看webkit內(nèi)核中的一些私有的meta標(biāo)簽，這些meta標(biāo)簽在開發(fā)webapp時起到非常重要的作用<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection">123456 代碼laycode - v1.1 第一個meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽；第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；第三個meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；第四個meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼2、HTML5標(biāo)簽的使用 在開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現(xiàn)一些HTML4中無法實現(xiàn)的豐富的WEB應(yīng)用程序 的體驗，可以減少開發(fā)者很多的工作量，當(dāng)然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標(biāo)簽的作用。
比如定義一塊內(nèi)容或文章區(qū)域 可使用section標(biāo)簽，定義導(dǎo)航條或選項卡可以直接使用nav標(biāo)簽等等。3、放棄CSS float屬性 在項目開發(fā)過程中可以會遇到內(nèi)容排列顯示的布局，假如你遇見這樣的視覺稿，哥建議你放棄float，可以直接使用display:inline-block;4、利用CSS3邊框背景屬性 這個按鈕有圓角效果，有內(nèi)發(fā)光效果還有高光效果，這樣的按鈕使用CSS3寫是無法寫出來的，當(dāng)然圓角可以使用CSS3來寫，但高光和內(nèi)發(fā)光卻無法使用CSS3編寫，這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。
-webkit-border-image就個很復(fù)雜的樣式屬性。5、塊級化a標(biāo)簽 請保證將每條數(shù)據(jù)都放在一個a標(biāo)簽中，為何這樣做？因為在觸控手機(jī)上，為提升用戶體驗，盡可能的保證用戶的可點(diǎn)擊區(qū)域較大。
6、自適應(yīng)布局模式 在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內(nèi)層）的寬度定死。為達(dá)到適配各種手持設(shè)備，我建議前端工程師使用自適應(yīng)布局模式（支付寶 采用了自適應(yīng)布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設(shè)備的分辨率。
7、學(xué)會使用webkit-box 上一節(jié)，我們說過自適應(yīng)布局模式，有些同學(xué)可能會問：如何在移動設(shè)備上做到完全自適應(yīng)呢？很感謝webkit為display屬性提供了一個webkit-box的值，它可以幫助前端工程師做到盒子模型靈活控制。8、如何去除Android平臺中對郵箱地址的識別 看過iOS webapp API的同學(xué)都知道iOS提供了一個meta標(biāo)簽：用于禁用iOS對頁面中電話號碼的自動識別。
在iOS中是不自動識別郵件地 址的，但在Android平臺，它會自動檢測郵件地址，當(dāng)用戶touch到這個郵件地址時，Android會彈出一個框提示用戶發(fā)送郵件，如果你不想 Android自動識別頁面中的郵件地址，你不妨加上這樣一句meta標(biāo)簽在head中<meta content="email=no" name="format-detection" />9、如何去除iOS和Android中的輸入URL的控件條 你的老板或者PD或者交互設(shè)計師可能會要求你：能否讓我們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控件條？答案是可以做到的。我們可以利用一句簡單的javascript代碼來實現(xiàn)這個效果 setTimeout(scrollTo,0,0,0)； 請注意，這句代碼必須放在window.onload里才能夠正常的工作，而且你的當(dāng)前文檔的內(nèi)容高度必須是高于窗口的高度時，這句代碼才能有效的執(zhí)行。
10、如何禁止用戶旋轉(zhuǎn)設(shè)備 我曾經(jīng)也想禁止用戶旋轉(zhuǎn)設(shè)備，也想實現(xiàn)像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運(yùn)行。但現(xiàn)在我可以很負(fù)責(zé)任的告訴你：別想了！在移動版的webkit中做不到！至少Apple webapp API已經(jīng)說到了：我們?yōu)榱俗層脩粼趕afari中正常的瀏覽網(wǎng)頁，我們必須保證用戶的設(shè)備處于任何一個方位 時，safari都能夠正常的顯示網(wǎng)頁內(nèi)容（也就是自適應(yīng)），所以我們禁止開發(fā)者阻止瀏覽器的orientationchange事件，看來蘋果公司的出 發(fā)點(diǎn)是正確的，蘋果確實不是一般的蘋果。
iOS已經(jīng)禁止開發(fā)者阻止orientationchange事件，那Android呢？對不起，我沒有找到任何資料說Android禁止開發(fā)者阻止瀏覽器orientationchange事件，但是在Android平臺，確實也是阻止不了的。11、如何檢測用戶是通過主屏啟動你的webapp 看過Apple webapp API的同學(xué)都知道iOS為safari提供了一個將當(dāng)前頁面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加號，或者ipad頂部左側(cè)的小加號，就可以將當(dāng)前的頁面添加到設(shè)備的主屏，在設(shè)備的主屏?xí)詣?增加一個當(dāng)前頁面的啟動圖標(biāo)，點(diǎn)擊該啟動圖標(biāo)就可以快速、便捷的啟動你的webapp。
從主屏啟動的webapp和瀏覽器訪問你的webapp最大的區(qū)別 是它清除了瀏覽器上方和下方的工具條，這樣你的webapp就更加像是nativeapp了，還有一個區(qū)別是window對像。
2.新手開發(fā)移動端 H5 頁面有哪些注意事項
1、首先我們來看看webkit內(nèi)核中的一些私有的meta標(biāo)簽，這些meta標(biāo)簽在開發(fā)webapp時起到非常重要的作用<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection">123456代碼laycode - v1.1第一個meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽；第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；第三個meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；第四個meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼2、HTML5標(biāo)簽的使用在開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現(xiàn)一些HTML4中無法實現(xiàn)的豐富的WEB應(yīng)用程序 的體驗，可以減少開發(fā)者很多的工作量，當(dāng)然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標(biāo)簽的作用。
比如定義一塊內(nèi)容或文章區(qū)域 可使用section標(biāo)簽，定義導(dǎo)航條或選項卡可以直接使用nav標(biāo)簽等等。3、放棄CSS float屬性在項目開發(fā)過程中可以會遇到內(nèi)容排列顯示的布局，假如你遇見這樣的視覺稿，哥建議你放棄float，可以直接使用display:inline-block;4、利用CSS3邊框背景屬性這個按鈕有圓角效果，有內(nèi)發(fā)光效果還有高光效果，這樣的按鈕使用CSS3寫是無法寫出來的，當(dāng)然圓角可以使用CSS3來寫，但高光和內(nèi)發(fā)光卻無法使用CSS3編寫，這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。
-webkit-border-image就個很復(fù)雜的樣式屬性。5、塊級化a標(biāo)簽請保證將每條數(shù)據(jù)都放在一個a標(biāo)簽中，為何這樣做？因為在觸控手機(jī)上，為提升用戶體驗，盡可能的保證用戶的可點(diǎn)擊區(qū)域較大。
6、自適應(yīng)布局模式在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內(nèi)層）的寬度定死。為達(dá)到適配各種手持設(shè)備，我建議前端工程師使用自適應(yīng)布局模式（支付寶 采用了自適應(yīng)布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設(shè)備的分辨率。
7、學(xué)會使用webkit-box上一節(jié)，我們說過自適應(yīng)布局模式，有些同學(xué)可能會問：如何在移動設(shè)備上做到完全自適應(yīng)呢？很感謝webkit為display屬性提供了一個webkit-box的值，它可以幫助前端工程師做到盒子模型靈活控制。8、如何去除Android平臺中對郵箱地址的識別看過iOS webapp API的同學(xué)都知道iOS提供了一個meta標(biāo)簽：用于禁用iOS對頁面中電話號碼的自動識別。
在iOS中是不自動識別郵件地 址的，但在Android平臺，它會自動檢測郵件地址，當(dāng)用戶touch到這個郵件地址時，Android會彈出一個框提示用戶發(fā)送郵件，如果你不想 Android自動識別頁面中的郵件地址，你不妨加上這樣一句meta標(biāo)簽在head中<meta content="email=no" name="format-detection" />9、如何去除iOS和Android中的輸入URL的控件條你的老板或者PD或者交互設(shè)計師可能會要求你：能否讓我們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控件條？答案是可以做到的。我們可以利用一句簡單的javascript代碼來實現(xiàn)這個效果setTimeout(scrollTo,0,0,0)；請注意，這句代碼必須放在window.onload里才能夠正常的工作，而且你的當(dāng)前文檔的內(nèi)容高度必須是高于窗口的高度時，這句代碼才能有效的執(zhí)行。
10、如何禁止用戶旋轉(zhuǎn)設(shè)備我曾經(jīng)也想禁止用戶旋轉(zhuǎn)設(shè)備，也想實現(xiàn)像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運(yùn)行。但現(xiàn)在我可以很負(fù)責(zé)任的告訴你：別想了！在移動版的webkit中做不到！至少Apple webapp API已經(jīng)說到了：我們?yōu)榱俗層脩粼趕afari中正常的瀏覽網(wǎng)頁，我們必須保證用戶的設(shè)備處于任何一個方位 時，safari都能夠正常的顯示網(wǎng)頁內(nèi)容（也就是自適應(yīng)），所以我們禁止開發(fā)者阻止瀏覽器的orientationchange事件，看來蘋果公司的出 發(fā)點(diǎn)是正確的，蘋果確實不是一般的蘋果。
iOS已經(jīng)禁止開發(fā)者阻止orientationchange事件，那Android呢？對不起，我沒有找到任何資料說Android禁止開發(fā)者阻止瀏覽器orientationchange事件，但是在Android平臺，確實也是阻止不了的。11、如何檢測用戶是通過主屏啟動你的webapp看過Apple webapp API的同學(xué)都知道iOS為safari提供了一個將當(dāng)前頁面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加號，或者ipad頂部左側(cè)的小加號，就可以將當(dāng)前的頁面添加到設(shè)備的主屏，在設(shè)備的主屏?xí)詣?增加一個當(dāng)前頁面的啟動圖標(biāo)，點(diǎn)擊該啟動圖標(biāo)就可以快速、便捷的啟動你的webapp。
從主屏啟動的webapp和瀏覽器訪問你的webapp最大的區(qū)別 是它清除了瀏覽器上方和下方的工具條，這樣你的webapp就更加像是nativeapp了，還有一個區(qū)別是window對像中的n。
3.H5網(wǎng)頁設(shè)計需要注意哪些要點(diǎn)呢?
H5頁面設(shè)計要點(diǎn) 細(xì)節(jié)與統(tǒng)一：要成就高品質(zhì)的用戶體驗，必須考慮到細(xì)節(jié)與整體的統(tǒng)一性。
復(fù)古擬物的視覺風(fēng)格，那字體就不能過于現(xiàn)代；幽默調(diào)侃的調(diào)調(diào)，那文案措辭就不能過于嚴(yán)肅；打情感內(nèi)容牌的，動效就不能過于花哨。 2。
緊跟熱點(diǎn)，利用話題效應(yīng)：想要你的H5專題頁一夜爆紅，第一時間住熱點(diǎn)并火速上線，借機(jī)進(jìn)行品牌宣傳也不失為一條捷徑。 3。
講個好故事，引發(fā)情感共鳴：不論H5的形式如何多變，有價值的內(nèi)容始是第一位的。在有限的篇幅里，學(xué)會講故事，引發(fā)用戶的情感共鳴，將對內(nèi)容的傳播形成極大的推動。
4。合理運(yùn)用技術(shù)，打造流暢的互動體驗：隨著技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應(yīng)、擦除、3D視圖等互動效果。
相較于塞入各種不同種類的動效導(dǎo)致頁面混亂臃腫，我們更提倡的是合理運(yùn)用技術(shù)，用心專注于為用戶提供流暢的互動體驗。 。
4.移動端網(wǎng)站建設(shè)有哪些注意事項?
第一：移動網(wǎng)站頁面設(shè)計 因為移動端不同于PC端，我們在設(shè)計之前就必須要考慮到其分辨率的問題，由于移動端的特點(diǎn)屏幕小卻對內(nèi)容要求要精簡全。
所以移動網(wǎng)站建站對于頁面要求很高，在移動網(wǎng)站頁面設(shè)計之前就需要合理安排網(wǎng)站內(nèi)容和結(jié)構(gòu)。同時也要做好網(wǎng)站頁面布局和視覺體驗，因為只有良好的用戶體驗，才能讓網(wǎng)站在移動端獲得好的排名。
第二、移動網(wǎng)站導(dǎo)航設(shè)計 由于移動設(shè)備分辨率的局限性，所以移動網(wǎng)站的導(dǎo)航設(shè)計顯得尤為困難，但是又不得不設(shè)計出很清晰導(dǎo)航結(jié)構(gòu)，因為用戶進(jìn)入到首頁之后，如果導(dǎo)航不清晰，將很難繼續(xù)訪問到網(wǎng)站內(nèi)部。所以如何把PC端導(dǎo)航盡可能簡單甚至濃縮到移動網(wǎng)站就變得很重要，小編認(rèn)為導(dǎo)航盡量包含主要欄目和重要信息頁足矣。
第三、網(wǎng)站內(nèi)容布局要直奔主題 移動端由于分辨率的問題，不可能做的跟PC端那么全面。這就需要把重要信息放在顯眼的位置。
最好別下滑到下一頁面。盡可能讓用戶在首屏就找到用戶想要的信息。
這樣減少用戶下拉頁面時間，也可以用戶良好體驗度。 第四、移動網(wǎng)站加載問題 移動網(wǎng)站打開速度或者速率，都影響用戶打開網(wǎng)站。
如果網(wǎng)站打開過慢，甚至超過5秒用戶打開率就迅速下降。因此，移動網(wǎng)站打開速率盡量保持在3秒之內(nèi)，用戶就很愿意在內(nèi)容上面花費(fèi)一定時間。
因此，移動網(wǎng)站建設(shè)就盡量減少不必需要的圖片甚至動畫的使用，保證網(wǎng)站打開速度。
5.移動端網(wǎng)站建設(shè)需要注意哪些要點(diǎn)
1、導(dǎo)航菜單
移動站點(diǎn)最為重點(diǎn)的部分應(yīng)該就是頭部導(dǎo)航，導(dǎo)航必須包含重要的欄目以及內(nèi)容。網(wǎng)站多用整站導(dǎo)航按鈕及搜索功能，建議把不允許用戶縮放，給禁用了，可能放大了網(wǎng)站就錯位了，影響用戶體驗。
2、整體結(jié)構(gòu)分明
移動站點(diǎn)和pc站點(diǎn)一樣要注意網(wǎng)頁的整體布局樣式，關(guān)于我們、產(chǎn)品、新聞等的樣式要舒服。
3、字體大小
字體和字體大小可以直接影響用戶體驗，在一般情況下建議使用微軟雅黑字體，不要使用藝術(shù)字體。字體顏色和背景色要有一定的對比，字號應(yīng)該在14px-20px之間，字體太小看著眼睛疼，太大影響整體的布局。
4、頁面分辨率
移動站點(diǎn)頁面分辨率要控制得當(dāng)，要做適配不同分辨率的手機(jī)，一些標(biāo)題要居中對齊。頁面不能出現(xiàn)橫向滾動條，建議適配chrome瀏覽器開發(fā)者模式下面的各種分辨率即可
5、瀏覽器兼容
移動端要考慮各種瀏覽器的兼容性，主流的手機(jī)瀏覽器有：UC瀏覽器、百度瀏覽器、QQ瀏覽器、蘋果瀏覽器等，都要測試有無差錯。
6.移動互聯(lián)網(wǎng)網(wǎng)頁開發(fā)時要注意哪些問題
關(guān)于這個問題yyseoer顧問表示：
一、企業(yè)手機(jī)端網(wǎng)站開發(fā)應(yīng)留意網(wǎng)站的語氣風(fēng)格，手機(jī)和pc端網(wǎng)站必須留意。色彩是吸引住人們集中注意力的一整因素。好的色調(diào)讓客戶在愿意繼續(xù)訪問之前覺得舒適。
二、企業(yè)手機(jī)端企業(yè)網(wǎng)站建設(shè)不要設(shè)定廣告，盡管廣告針對網(wǎng)站的存活是很由幫助的，但充分考慮移動端的屏幕要比電腦上的小得多。彈出廣告通常會阻攔用戶瀏覽的信息和操作，因此不要放置彈出窗口廣告。
三、企業(yè)手機(jī)端網(wǎng)站建設(shè)的萊單應(yīng)簡介，因為移動屏幕的限定，網(wǎng)站的菜單項不能像計算機(jī)那般顯示，因而移動網(wǎng)站的萊單應(yīng)簡潔，能夠顯示功能鍵導(dǎo)行作用。
四、公司手機(jī)端企業(yè)網(wǎng)站建設(shè)應(yīng)快捷，用戶應(yīng)用移動網(wǎng)絡(luò)就是圖方便，假如他們?yōu)榱司W(wǎng)頁瀏覽網(wǎng)站頁面的內(nèi)容而被要求注冊，那就太麻煩了。因此，要開放瀏覽權(quán)限，一些特別的權(quán)限可以授予注冊用戶。
五、公司手機(jī)端企業(yè)網(wǎng)站建設(shè)應(yīng)留意移動網(wǎng)站的內(nèi)容布局，盡可能簡潔明了，不要太長，文字還要盡量大，并一直考慮到用戶在小屏幕上如何便捷知道基本信息。
7.移動端網(wǎng)站建設(shè)需要注意哪些要點(diǎn)
1、導(dǎo)航菜單移動站點(diǎn)最為重點(diǎn)的部分應(yīng)該就是頭部導(dǎo)航，導(dǎo)航必須包含重要的欄目以及內(nèi)容。
網(wǎng)站多用整站導(dǎo)航按鈕及搜索功能，建議把不允許用戶縮放，給禁用了，可能放大了網(wǎng)站就錯位了，影響用戶體驗。2、整體結(jié)構(gòu)分明移動站點(diǎn)和pc站點(diǎn)一樣要注意網(wǎng)頁的整體布局樣式，關(guān)于我們、產(chǎn)品、新聞等的樣式要舒服。
3、字體大小字體和字體大小可以直接影響用戶體驗，在一般情況下建議使用微軟雅黑字體，不要使用藝術(shù)字體。字體顏色和背景色要有一定的對比，字號應(yīng)該在14px-20px之間，字體太小看著眼睛疼，太大影響整體的布局。
4、頁面分辨率移動站點(diǎn)頁面分辨率要控制得當(dāng)，要做適配不同分辨率的手機(jī)，一些標(biāo)題要居中對齊。頁面不能出現(xiàn)橫向滾動條，建議適配chrome瀏覽器開發(fā)者模式下面的各種分辨率即可5、瀏覽器兼容移動端要考慮各種瀏覽器的兼容性，主流的手機(jī)瀏覽器有：UC瀏覽器、百度瀏覽器、QQ瀏覽器、蘋果瀏覽器等，都要測試有無差錯。
