手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）

時間 2019-11-06

標籤手機頁面項目遇到一些問題解決辦法持續更新简体版

原文原文鏈接

1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?

首先你可能會給頁面的html和body增長了height: 100%, 而後就可能形成IOS上頁面滑動的卡頓問題。解決方案是：
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滾動的容器中增長：-webkit-overflow-scrolling: touch或者給body增長：body {overflow-x: hidden}。javascript

2.ios頁面橡皮彈回效果遮擋頁面選項卡？

(1) 有時body和html的height: 100%去除掉問題可能就沒有了。
(2) 到達臨界值的時候在阻止事件默認行爲css

var startY,endY;
//記錄手指觸摸的起點座標
$('body').on('touchstart',function (e) {
     startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
     endY = e.touches[0].pageY;  //記錄手指觸摸的移動中的座標
     //手指下滑，頁面到達頂端不能繼續下滑
     if(endY>startY&& $(window).scrollTop()<=0){
         e.preventDefault();
     }
   //手指上滑，頁面到達底部能繼續上滑
     if(endY<startY&& $(window).scrollTop()+ 
         $(window).height()>=$('body')[0].scrollHeight){
         e.preventDefault();
     }
})

有時也會遇見彈窗出來後兩個層的橡皮筋效果出現問題，咱們能夠在彈出彈出時給底層頁面加上一個類名，類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止，就不會影響彈窗層。html

3.IOS機型margin屬性無效問題？

(1) 設置html body的高度爲百分比時，margin-bottom在safari裏失效
(2) 直接padding代替margin前端

4.Ios綁定點擊事件不執行？

(1)添加樣式cursor ：pointer。點擊後消除背景閃一下的css：-webkit-tap-highlight-color:transparent;java

5.Ios鍵盤換行變爲搜索？

首先，input 要放在 form裏面。
這時 "換行" 已經變成「前往」。
若是想變成「搜索」，input 設置 type="search"。

6.Jq對a標籤點擊事件不生效？

出現這種狀況的緣由不明，有的朋友解釋：咱們平時都是點擊的A標籤中的文字了。因此要想用JS模擬點擊A標籤事件，就得先往A標籤中的文字添加能被JS捕獲的元素，而後再用JS模擬點擊該元素便可。可是我以爲不合理，雖然找不到緣由可是解決辦法仍是有的。
(1)document.getElementById("abc ").click();
(2)$("#abc ")[0].click();jquery

7.有時由於服務器或者別的緣由致使頁面上的圖片沒有找到？

這是咱們想須要用一個本地的圖片代替沒有找的的圖片android

<script type="text/javascript"> 
function nofind(){ 
var img=event.srcElement; 
img.src="images/logoError.png"; 
img.onerror=null; 控制不要一直跳動 
} 
</script> 

<img src="images/logo.png" onerror="nofind();" />

8.transform屬性影響position:fixed？

(1)規範中有規定：若是元素的transform值不爲none，則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1不僅在手機上，電腦上也同樣。除了fixed元素會受影響以外，z-index（層疊上下文）值也會受影響。絕對定位元素等和包含塊有關的屬性都會受到影響。固然若是transform元素的display值爲inline時又會有所不一樣。最簡單的解決方法就是transform元素內部不能有absolute、fixed元素.ios

9.ios對position: fixed不太友好，有時咱們須要加點處理？

在安卓上面，點擊頁面底部的輸入框，軟鍵盤彈出，頁面移動上移。
而ios上面，點擊頁面底部輸入框，軟鍵盤彈出，輸入框看不到了。。。查資料說什麼的都有，iscroll,jquery-moblie，absolute，fixe，static都很是複雜，要改不少。。。
讓他彈出時讓滾動條在最低部web

var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {
    $('textarea').focus(function () {
        window.setTimeout('scrollBottom()', 500);
    });
}
function scrollBottom() {
    window.scrollTo(0, $('body').height());
}

10.jq validate插件驗證問題？

(1)因此的input必須有name否則會出錯正則表達式

11.有時手機會出現斷網的狀況，我沒可能會對斷網的狀況作一些處理？

(1)navigator.onLine可判斷是不是脫機狀態.

12.判斷對象的長度？

(1)用Object.keys，Object.keys方法返回的是一個數組，數組裏面裝的是對象的屬性。

var person = {
    "name" : "zhangshan",
    "sex" : "man",
    "age" : "50",
    "height" : "180",
    "phone" : "1xxxxxxxxxx",
    "email" : "xxxxxxxxx@xxx.com"
};
var arr = Object.keys(person);
console.log(arr.length);

(2)Object.getOwnPropertyNames(obj).length

13.上一題咱們用到了Object.keys與Object.getOwnPropertyNames他們的區別？

Object.keys定義：返回一個對象可枚舉屬性的字符串數組；
Object.getOwnPropertyNames定義：返回一個對象可枚舉、不可枚舉屬性的名稱；
屬性的可枚舉性、不可枚舉性：定義：可枚舉屬性是指那些內部「可枚舉」標誌設置爲 true 的屬性，對於經過直接的賦值和屬性初始化的屬性，該標識值默認爲即爲 true，對於經過 Object.defineProperty 等定義的屬性，該標識值默認爲 false。

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length);           //output：1
console.log(Object.getOwnPropertyNames(obj).length);    //output：2

console.log(Object.keys(obj));           //output：Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj));    //output：Array[2] => [0: "prop1", 1: "prop2"]

綜合實例：

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});

console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true

console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false

console.log('prop1' in obj);    //output: true
console.log('prop2' in obj);    //output: true

for (var item in obj) {
    console.log(item);
}
//output：prop1

for (var item in Object.getOwnPropertyNames(obj)) {
    console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]

14.移動開發不一樣手機彈出數字鍵盤問題？

(1)type="tel"
iOS和Android的鍵盤表現都差很少
(2)type="number"
優勢是Android下實現的一個真正的數字鍵盤
缺點一：iOS下不是九宮格鍵盤，輸入不方便
缺點二：舊版Android（包括微信所用的X5內核）在輸入框後面會有超級雞肋的小尾巴，好在Android 4.4.4之後給去掉了。
不過對於缺點二，咱們能夠用webkit私有的僞元素給fix掉：

input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
}

(3)pattern屬性
pattern用於驗證表單輸入的內容，一般HTML5的type屬性，好比email、tel、number、data類、url等，已經自帶了簡單的數據格式驗證功能了，加上pattern後，前端部分的驗證更加簡單高效了。
顯而易見，pattern的屬性值要用正則表達式。
實例簡單的數字驗證
數字的驗證有兩個：
<input type="number" pattern="d">
<input type="number" pattern="[0-9]*">

15.input[number]類型輸入非數字字符

js獲取的值是空；好比-12，+123等

16.Javascript：history.go()和history.back()的用法與區別？

簡單的說就是：go(-1):返回上一頁，原頁面表單中的內容會丟失；back():返回上一頁，原頁表表單中的內容會保留。history.go(-1):後退+刷新history.back():後退
之因此注意到這個區別，是由於不一樣的瀏覽器後退行爲也是有區別的，而區別就跟javascript：history.go()和history.back()的區別相似。
Chrome和ff瀏覽器後退頁面，會刷新後退的頁面，如有數據請求也會提交數據申請。相似於history.go(-1);
而safari（包括桌面版和ipad版）的後退按鈕則不會刷新頁面，也不會提交數據申請。相似於javascript：history.back();

17.Meta基礎知識：

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
// height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
// initial-scale    默認縮放比例，爲一個數字，能夠帶小數
// minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
// maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
// user-scalable    是否容許手動縮放 
空白頁基本meta標籤
<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本之後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別爲電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
其餘meta標籤
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

18.移動端如何定義字體font-family？
@ --------------------------------------中文字體的英文名稱
@ 宋體 SimSun
@ 黑體 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體 NSimSun
@ 新細明體 MingLiU
@ 細明體 MingLiU
@ 標楷體 DFKai-SB
@ 仿宋 FangSong
@ 楷體 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷體_GB2312 KaiTi_GB2312
@
@ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

19.打電話發短信寫郵件怎麼實現？

// 1、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>

//  2、發短信，winphone系統無效
<a href="sms:10086">發短信給: 10086</a>

// 3、寫郵件
<a href="mailto:863139978@qq.com">點擊我發郵件</a>
//2.收件地址後添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點擊我發郵件</a>
//3.跟着抄送地址後，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點擊我發郵件</a>
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址
<a href="mailto:863139978@qq.com;384900096@qq.com">點擊我發郵件</a>
//5.包含主題，用?subject=
<a href="mailto:863139978@qq.com?subject=郵件主題">點擊我發郵件</a>
//6.包含內容，用?body=;如內容包含文本，使用%0A給文本換行 
<a href="mailto:863139978@qq.com?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點擊我發郵件</a>
//7.內容包含連接，含http(s)://等的文本自動轉化爲連接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">點擊我發郵件</a>
//8.內容包含圖片（PC不支持）
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">點擊我發郵件</a>
//9.完整示例
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">點擊我發郵件</a>

20.移動端touch事件（區分webkit和winphone）？

// 如下支持webkit
touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

//TouchEvent說明：
touches：屏幕上全部手指的信息
targetTouches：手指在目標區域的手指信息
changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息

//參數信息(changedTouches[0])
clientX、clientY在顯示區的座標
target：當前元素

//事件響應順序
ontouchstart > ontouchmove > ontouchend > onclick

21.點擊元素產生背景或邊框怎麼去掉

//ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0去除灰色半透明遮罩；
//android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果；
//winphone系統,點擊標籤產生的灰色半透明背景，能經過設置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤 
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符
}   
// 也能夠 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">

22.美化表單元素

//1、使用appearance改變webkit瀏覽器的默認外觀
input,select { -webkit-appearance:none; appearance: none; }

//2、winphone下，使用僞元素改變表單元素默認外觀
//1.禁用select默認箭頭，::-ms-expand修改表單控件下拉箭頭，設置隱藏並使用背景圖片來修飾
select::-ms-expand { display:none; }

//2.禁用radio和checkbox默認樣式，::-ms-check修改表單複選框或單選框默認圖標，設置隱藏並使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表單輸入框默認清除按鈕，::-ms-clear修改清除按鈕，設置隱藏並使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }

23.移動端字體單位font-size選擇px仍是rem？

// 如需適配多種移動設備，建議使用rem。如下爲參考值：
html { font-size: 62.5%; } //10*16 = 62.5%
//設置12px字體這裏注意在rem前要加上對應的px值，解決不支持rem的瀏覽器的兼容問題，作到優雅降級
body { font-size:12px; font-size:1.2rem; }

24.input標籤添加上disable屬性在ios端字體顏色不兼容的問題？

input[disabled],input:disabled,input.disabled{

color: #3e3e3e;  
-webkit-text-fill-color: #3e3e3e;  
-webkit-opacity:1;  
opacity: 1;

}

25.IOS 的光標大小問題

IE：無論該行有沒有文字，光標高度與font-size一致。
FF：該行有文字時，光標高度與font-size一致。該行無文字時，光標高度與input的height一致。
Chrome：該行無文字時，光標高度與line-height一致；該行有文字時，光標高度從input頂部到文字底部(這兩種狀況都是在有設定line-height的時候)，若是沒有line-height，則是與font-size一致。
IOS中狀況和Chrome 類似。

設置字體大小和行高一致，而後經過 padding 撐開大小
只給IE瀏覽器設置 line-height
-ms-line-height:40px;

26.history.go()和history.back()的用法和區別?

go(-1): 返回上一頁，原頁面表單中的內容會丟失,是個新頁面。
back(): 返回上一頁，原頁表表單中的內容會保留。
不一樣的瀏覽器的後退行爲也是有區別的：
chrome和ff瀏覽器後退頁面，會刷新後退的頁面，如有數據請求也會提交數據申請。相似於
history.go(-1) 。
而safari（包括桌面版和ipad版本）的後退按鈕則不會刷新頁面，也不會提交數據申請。相似於
Javascript:history.back()。