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

時間 2019-12-05

原文原文鏈接

前言

這裏大部分是本身遇到過的狀況，還有一部分借鑑了同行的文章，若是你們有遇到其它坑，歡迎提出來一塊兒研究。css

知識要點

1. Meta標籤

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

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

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

<meta content="telephone=no" name="format-detection" />

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

<meta content="email=no" name="format-detection" />

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

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 據說在ios7以上版本就沒效果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent 可是我都是用black-->

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. 打電話發短信

<a href="tel:020-88888888">打電話給:020-88888888</a>
<a href="sms:911">發短信給: 911</a>

4. 圖片優化

1.base64編碼圖片替換url圖片;
2.圖片壓縮，提供一個網站用於壓縮;
3.圖片懶加載；
4.img和backgroundhtml
- img：html中的標籤img是網頁結構的一部分會在加載結構的過程當中和其餘標籤一塊兒加載；
- background：以css背景圖存在的圖片background會等到結構加載完成（網頁的內容所有顯示之後）纔開始加載；

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

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

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

<body onOrientationchange="updateOrientation();">

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

0 --- 豎屏
90 --- 逆時針旋轉橫屏
-90 --- 順時針旋轉橫屏
180 --- 豎屏，上下顛倒

解決方法：jquery

1.你能夠在設備旋轉時間監聽裏面對body使用CSS3裏面的transition中的旋轉來保持頁面豎向；
2.此方法只適用於安卓手機

<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">

技巧與必知

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

使用事件監聽或事件綁定時，因爲父元素選擇body或document元素，致使在ios中事件觸發無效，因此不使用body和document元素做爲父級元素。android

2. navigator.onLine兼容性問題，需謹慎使用；

3. ios中日期顯示爲NaN：

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

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

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抓包
瀏覽器鏈接安卓機測試

實用網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。