移動端html5問題總結

時間 2019-11-14

標籤移動 html5 html 問題總結欄目無線简体版

原文原文鏈接

1，開發時碰到了哪些技術問題css

1）低版本手機不支持es6，使用babelhtml

2）引入百度地圖js api時，須要使用https協議，不然不能正常使用API。在iOS 10中，蘋果對webkit定位權限進行了修改，全部定位請求的頁面必須是https協議的前端

3）<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">html5

強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；加上這一句input獲取焦點時頁面不會放大webpack

4）在微信公衆號中,input獲取焦點時，頁面上方會提示就會提示「防欺詐盜號，請勿支付或輸入QQ密碼」。在公衆平臺的管理後臺設置業務域名便可解決ios

5）<form action="#" @submit="doSearch"><input type="search"/></form>css3

//點擊鍵盤的搜索按鈕便可觸發form的submit事件 e.preventDefault();//阻止表單默認事件es6

移動端的鍵盤右下角顯示「搜索」（安卓）或「Search"（蘋果）按鈕，點擊該按鈕便可提交表單web

6）頁面列表上拉加載，實現分頁，縮短請求時間canvas

監聽頁面滾動事件，判斷滾動條離頁面底部的距離，而後距離達到必定的值，向服務端發請求。將請求的結果拼接在原有的列表後面，便可實現上拉加載分頁。

7）移動端html5拖拽

當按下手指時，觸發ontouchstart；當移動手指時，連續地觸發ontouchmove（在這個事件發生期間，調用preventDefault()事件能夠阻止滾動）；當移走手指時，觸發ontouchend。

onclick只在你快速點擊並放開纔會被執行，若是你點擊一個區域，很遲才放開，那麼onclick是不會執行的(touchstart->...->touchend)

執行順序是ontouchstart > ontouchend > onclick

我的觀點：移動端不能使用HTML5拖放實現拖拽效果（ondragstart...），可使用touch事件

8）ios上頁面滾動不流暢

-webkit-overflow-scrolling: touch;

9）ios上背景圖片閃爍加載問題（緣由暫時不詳）

var cvs = document.createElement('canvas');
cvs.width = 5; cvs.height = 2;cvs.toDataURL();
這句話放在瀏覽器執行一下，就得出了base64的字符串。
<img class="blur-bg" :style="{backgroundImage: 'url('+picUrl+item.merLogo+')'}" src="data:image/png;base64,iVBORw0..."/>

10）兼容低版本手機系統（ios 9和ios 8）

10.1）不支持es6，如箭頭函數和let

10.2）var App = new Vue({ router:router //不兼容縮寫 });

10.3）兼容css3，如flex佈局（ios瀏覽器是webkit內核）

加上-webkit-前綴；display: flex; display: -webkit-flex; flex: 1;-webkit-flex: 1;

10.4）autoprefixer+postcss-loader：根據當前瀏覽器給css加上必要的前綴以兼容該瀏覽器，同時移除沒必要要的css前綴

2，移動端提升用戶的體驗度

1）經過上拉加載分頁，縮短請求時間

2）減小等待，反饋及時

當不可避免的出現了加載和等待的時候，須要予以及時的反饋以舒緩用戶等待的不良情緒。如：向服務端發請求時顯示「加載中」彈框，請求完成關閉該彈框；當請求的數據爲空時，在頁面上提示查詢無記錄等，避免出現空白頁面，讓用戶覺得應用卡死。

3）明確直觀的的結果提示，如報錯

除了在用戶等待的過程當中需予以及時反饋外，對操做的結果也須要予以明確反饋。彈出式提示（Toast）適用於輕量級的成功提示，1.5秒後自動消失，並不打斷流程，對用戶影響較小，適用於不須要強調的操做提醒，例如成功提示。特別注意該形式不適用於錯誤提示，由於錯誤提示需明確告知用戶，於是不適合使用一閃而過的彈出式提示。對於操做結果已是當前流程的終結的狀況，可以使用操做結果頁來反饋。這種方式最爲強烈和明確的告知用戶操做已經完成，並可根據實際狀況給出下一步操做的指引。

4）減小 HTTP 資源請求次數&減少 HTTP 請求大小

使用構建工具如webpack來合併JavaScript 或 CSS 代碼，壓縮靜態圖片資源以及移除代碼中的註釋並壓縮；

5）把 CSS 資源引用放到 HTML 文件頂部；JavaScript 資源引用放到 HTML 文件底部

通常推薦將全部 CSS 資源儘早指定在 HTML 文檔 <head> 中，這樣瀏覽器能夠優先下載 CSS 並儘早完成頁面渲染。

JavaScript 資源放到 HTML 文檔底部能夠防止 JavaScript 的加載和解析執行對頁面渲染形成阻塞。因爲 JavaScript 資源默認是解析阻塞的，除非被標記爲異步或者經過其餘的異步方式加載，不然會阻塞 HTML DOM 解析和 CSS 渲染的過程。

6）相對於桌面端瀏覽器，移動端 Web 瀏覽器上有一些較爲明顯的特色：設備屏幕較小、新特性兼容性較好、支持一些較新的 HTML5 和 CSS3 特性、須要與 Native 應用交互等。但移動端瀏覽器可用的 CPU 計算資源和網絡資源極爲有限，所以要作好移動端 Web 上的優化每每須要作更多的事情。首先，在移動端 Web 的前端頁面渲染中，桌面瀏覽器端上的優化規則一樣適用，此外針對移動端也要作一些極致的優化來達到更好的效果。

7）首屏加載和按需加載，非首屏內容滾屏加載，保證首屏內容最小化

因爲移動端網絡速度相對較慢，網絡資源有限，所以爲了儘快完成頁面內容的加載，須要保證首屏加載資源最小化，非首屏內容使用滾動的方式異步加載。通常推薦移動端頁面首屏數據展現延時最長不超過3秒。

8）圖片壓縮處理

在移動端，一般要保證頁面中一切用到的圖片都是通過壓縮優化處理的，而不是以原圖的形式直接使用的，由於那樣很消耗流量，並且加載時間更長。

9）使用 touchstart 代替 click

因爲移動端屏幕的設計， touchstart 事件和 click 事件觸發時間之間存在 300 毫秒的延時，因此在頁面中沒有實現 touchmove 滾動處理的狀況下，可使用 touchstart 事件來代替元素的 click 事件，加快頁面點擊的響應速度，提升用戶體驗。但同時咱們也要注意頁面重疊元素 touch 動做的點擊穿透問題。