移動web開發問題和經驗總結

MorePainMoreGain 發布于2019-08-02 16:02 / 2074人閱讀

摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網站適配測試兼容性網站前端開發雅虎條優化準則

前言

這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。

知識要點 1. Meta標簽

1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1

2.禁止ios上自動識別電話

3.禁止android上自動識別郵箱

4.針對ios上的safari上地址欄和頂端樣式條的

2. JS和jquery獲取各種屏幕的寬度和高度的代碼

// Javascript:
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth

// Jquery：
$(document).ready(function(){
　　alert($(window).height()); //瀏覽器當前窗口可視區域高度
　　alert($(document).height()); //瀏覽器當前窗口文檔的高度
　　alert($(document.body).height());//瀏覽器當前窗口文檔body的高度
　　alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
　　alert($(window).width()); //瀏覽器當前窗口可視區域寬度
　　alert($(document).width());//瀏覽器當前窗口文檔對象寬度
　　alert($(document.body).width());//瀏覽器當前窗口文檔body的寬度
　　alert($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
})

3. 打電話發短信

打電話給:020-88888888
發短信給: 911

4. 圖片優化

1.base64編碼圖片替換url圖片;

2.圖片壓縮，提供一個網站用于壓縮;

3.圖片懶加載；

4.img和background

img：html中的標簽img是網頁結構的一部分會在加載結構的過程中和其他標簽一起加載；

background：以css背景圖存在的圖片background會等到結構加載完成（網頁的內容全部顯示以后）才開始加載；

so，網頁會先加載標簽img的內容，再加載背景圖片background引用的圖片

5. H5禁止手機屏幕橫屏的變相操作

移動設備上的頁面，當屏幕旋轉的時候會有一個orientationchange事件，可以給body元素增加此事件的監聽：

進入監聽方法中，通過window。orientation來獲取當前屏幕的狀態：

0 --- 豎屏

90 --- 逆時針旋轉橫屏

-90 --- 順時針旋轉橫屏

180 --- 豎屏，上下顛倒

解決方法：

1.你可以在設備旋轉時間監聽里面對body使用CSS3里面的transition中的旋轉來保持頁面豎向；

2.此方法只適用于安卓手機

技巧與必知 1. 原生js的事件監聽和jquery的事件綁定在ios中失效：

使用事件監聽或事件綁定時，由于父元素選擇body或document元素，導致在ios中事件觸發無效，所以不使用body和document元素作為父級元素。

2. navigator.onLine兼容性問題，需謹慎使用； 3. ios中日期顯示為NaN：

Date的日期格式，在ios中有兼容性問題，ios的日期會顯示成：NaN;

解決方法：在ios中支持"2017/12/26 19:36:00"，而不支持"2017-12-26 19:36:00"格式，后面一種格式，在ios中顯示Nan （Android中都可以顯示正常）

4. 移動端1px的問題:

由于不同的手機有不同的像素密度,css中的1px并不等于移動設備的1px。項目中使用js和rem做移動端的屏幕適配，所以產生0.5px的情況，導致低版本的手機展示不了0.5px的邊框。

解決方法：使用css解決1px的問題，并且給需要設置成1px的dom元素直接寫上：border-width:1px;

5. 頁面滾動條問題：

web頁面在PC瀏覽器上瀏覽時有滾動條；但是，在移動端瀏覽器打開時，沒有滾動條

解決方法：將頁面的最外層(我一般在寫頁面時，會在body標簽內寫一個大容器，用于存放頁面的內容)設置overflow:auto/scroll;并且不能設置height屬性的值(height:100%也不行)

6. 長按閃退的問題:

列表頁的列表項時(觸摸到文字)，在低版本手機中會出現閃退的情況

解決方法：

js部分：在事件觸發時添加e.preventDefault();，用于阻止默認行為
css部分：添加禁止文本文本復制的代碼 -webkit-touch-callout: none; user-select: none;

7. ios中，除body外的局部滾動，會出現卡頓問題

解決方案：在要滾動元素上加上

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;

8. 在ios上，input默認樣式和表單的disabled屬性帶來的重影樣式

1.去掉input的默認樣式

input,button,textarea{-webkit-appearance: none;}

2.因為ios默認了disabled屬性時透明度為0.8，解決：

input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }

9. 慎用fixed布局

css中position: fixed定位會因為其父元素上可能設置了transform屬性而失效。

微信端 1. 安卓在微信端不能使用window.location.reload()

解決方法：使用url地址后加隨機數來解決

2. ios下的微信頁面背景音樂無法自動播放問題

這個問題我有遇到過，然后網上了找了解決方法，但是沒有效果，所以只能改用開始移動播放音樂。

Other

zepto的scroll事件默認綁在window上的

app抓包

瀏覽器連接安卓機測試

實用網站

flexible適配

測試兼容性網站

前端開發

雅虎36條優化準則

云服務器 GPU云服務器經驗總結服務器遷移經驗總結移動web開發簡單的web開發問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54542.html

移動web開發問題和經驗總結

摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網站適配測試兼容性網站前端開發雅虎條優化準則前言這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。知識要點 1. Meta標簽 1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1 2.禁止ios上自動識別電話 3.禁止android上自動識別郵箱 4.針對ios上的...

yexiaobai 2019-08-30 14:14 評論0 收藏0
移動web開發問題和經驗總結

摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網站適配測試兼容性網站前端開發雅虎條優化準則前言這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。知識要點 1. Meta標簽 1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1 2.禁止ios上自動識別電話 3.禁止android上自動識別郵箱 4.針對ios上的...

Wildcard 2019-08-22 15:44 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
3年軟件測試經驗突顯迷茫...不知道我這種測試人員是不是被淘汰？??

這兩天和朋友談到軟件測試的發展：這一行的變化確實蠻大，從開始最基礎的功能測試，到現在自動化、性能、安全乃至于以后可能出現的大數據測試、AI測試崗位需求逐漸增多。我也在軟件測試這行摸爬滾打了十年了，正好有朋友問我：如何快速成為互聯網時代優秀的測試工程師呢？趁著最近終于有了些閑余時間，遂總結了下自動化測試的成長線路圖和職業必備技能，希望可以幫助各位少走彎路、破繭成蝶、邁向成功。下面我來分享下自動化測...

fasss 2021-11-15 11:38 評論0 收藏0