手機端頁面常見的問題

2018-7-3    周周

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



首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案是：



(1) 看是否能把body和html的height: 100%去除掉。

(2) 在滾動的容器中增加：-webkit-overflow-scrolling: touch或者給body增加：body {overflow-x: hidden}。



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



(1) 有時body和html的height: 100%去除掉問題可能就沒有了。

(2) 到達臨界值的時候在阻止事件默認行為 

var startY,endY;
//記錄手指觸摸的起點坐標
$('body').on('touchstart',function (e) {
     startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
     endY = e.touches[0].pageY;  //記錄手指觸摸的移動中的坐標
     //手指下滑，頁面到達頂端不能繼續(xù)下滑
     if(endY>startY&& $(window).scrollTop()<=0){
         e.preventDefault();
     }
   //手指上滑，頁面到達底部能繼續(xù)上滑
     if(endY<startY&& $(window).scrollTop()+ 
         $(window).height()>=$('body')[0].scrollHeight){
         e.preventDefault();
     }
})
有時也會碰見彈窗出來后兩個層的橡皮筋效果出現(xiàn)問題，我們可以在彈出彈出時給底層頁面加上一個類名，類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止，就不會影響彈窗層。 3.IOS機型margin屬性無效問題？ (1) 設(shè)置html body的高度為百分比時，margin-bottom在safari里失效 (2) 直接padding代替margin 4.Ios綁定點擊事件不執(zhí)行？  (1)添加樣式cursor ：pointer。點擊后消除背景閃一下的css：-webkit-tap-highlight-color:transparent;  5.Ios鍵盤換行變?yōu)樗阉鳎?/span> 首先，input 要放在 form里面。 這時 "換行" 已經(jīng)變成 “前往”。 如果想變成 “搜索”，input 設(shè)置 type="search"。 6.Jq對a標簽點擊事件不生效？ 出現(xiàn)這種情況的原因不明，有的朋友解釋：我們平時都是點擊的A標簽中的文字了。 所以要想用JS模擬點擊A標簽事件，就得先往A標簽中的文字添加能被JS捕獲的元素，然后再用JS模擬點擊該元素即可。但是我覺得不合理，雖然找不到原因但是解決辦法還是有的。 (1)document.getElementById("abc ").click(); (2)$("#abc ")[0].click(); 7.有時因為服務(wù)器或者別的原因?qū)е马撁嫔系膱D片沒有找到？ 這是我們想需要用一個本地的圖片代替沒有找的的圖片
<script type="text/javascript"> 
function nofind(){ 
var img=event.srcElement; 
img.src="images/logoError.png"; 
img.onerror=null; 控制不要一直跳動 
} 
</script> 
<img src="images/logo.png" />

8.transform屬性影響position:fixed？



(1)規(guī)范中有規(guī)定：如果元素的transform值不為none，則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1不只在手機上，電腦上也一樣。除了fixed元素會受影響之外，z-index（層疊上下文）值也會受影響。絕對定位元素等和包含塊有關(guān)的屬性都會受到影響。當(dāng)然如果transform元素的display值為inline時又會有所不同。最簡單的解決方法就是transform元素內(nèi)部不能有absolute、fixed元素.



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



在安卓上面，點擊頁面底部的輸入框，軟鍵盤彈出，頁面移動上移。

而ios上面，點擊頁面底部輸入框，軟鍵盤彈出，輸入框看不到了。。。查資料說什么的都有，iscroll,jquery-moblie，absolute，fixe，static都非常復(fù)雜，要改很多。。。

讓他彈出時讓滾動條在部
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.有時手機會出現(xiàn)斷網(wǎng)的情況，我沒可能會對斷網(wǎng)的情況做一些處理？



(1)navigator.onLine可判斷是否是脫機狀態(tài).



12.判斷對象的長度？



(1)用Object.keys，Object.keys方法返回的是一個數(shù)組，數(shù)組里面裝的是對象的屬性
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他們的區(qū)別？



Object.keys定義：返回一個對象可枚舉屬性的字符串?dāng)?shù)組；

Object.getOwnPropertyNames定義：返回一個對象可枚舉、不可枚舉屬性的名稱；

屬性的可枚舉性、不可枚舉性：定義：可枚舉屬性是指那些內(nèi)部 “可枚舉” 標志設(shè)置為 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.移動開發(fā)不同手機彈出數(shù)字鍵盤問題？



(1)type="tel"

iOS和Android的鍵盤表現(xiàn)都差不多

(2)type="number"

優(yōu)點是Android下實現(xiàn)的一個真正的數(shù)字鍵盤

缺點一：iOS下不是九宮格鍵盤，輸入不方便

缺點二：舊版Android（包括微信所用的X5內(nèi)核）在輸入框后面會有超級雞肋的小尾巴，好在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用于驗證表單輸入的內(nèi)容，通常HTML5的type屬性，比如email、tel、number、data類、url等，已經(jīng)自帶了簡單的數(shù)據(jù)格式驗證功能了，加上pattern后，前端部分的驗證更加簡單了。

顯而易見，pattern的屬性值要用正則表達式。

實例 簡單的數(shù)字驗證

數(shù)字的驗證有兩個：

<input type="number" pattern="d"> 

<input type="number" pattern="[0-9]*">



15.input[number]類型輸入非數(shù)字字符



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



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



簡單的說就是：go(-1):返回上一頁，原頁面表單中的內(nèi)容會丟失；back():返回上一頁，原頁表表單中的內(nèi)容會保留。history.go(-1):后退+刷新history.back():后退

之所以注意到這個區(qū)別，是因為不同的瀏覽器后退行為也是有區(qū)別的，而區(qū)別就跟javascript：history.go()和history.back()的區(qū)別類似。

Chrome和ff瀏覽器后退頁面，會刷新后退的頁面，若有數(shù)據(jù)請求也會提交數(shù)據(jù)申請。類似于history.go(-1);

而safari（包括桌面版和ipad版）的后退按鈕則不會刷新頁面，也不會提交數(shù)據(jù)申請。類似于javascript：history.back();



17.Meta基礎(chǔ)知識：



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

// width    設(shè)置viewport寬度，為一個正整數(shù)，或字符串‘device-width’

// height   設(shè)置viewport高度，一般設(shè)置了寬度，會自動解析出高度，可以不用設(shè)置

// initial-scale    默認縮放比例，為一個數(shù)字，可以帶小數(shù)

// minimum-scale    允許用戶最小縮放比例，為一個數(shù)字，可以帶小數(shù)

// maximum-scale    允許用戶最大縮放比例，為一個數(shù)字，可以帶小數(shù)

// user-scalable    是否允許手動縮放 

空白頁基本meta標簽

<!-- 設(shè)置縮放 -->

<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頂端狀態(tài)條的樣式（可選default/black/black-translucent ） -->

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- IOS中禁用將數(shù)字識別為電話號碼/忽略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">

<!-- 針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別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應(yīng)用模式 -->

<meta name="browsermode" content="application">

<!-- QQ應(yīng)用模式 -->

<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 

@

@ 說明：中文字體多數(shù)使用宋體、雅黑，英文用Helvetica



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



19.打電話發(fā)短信寫郵件怎么實現(xiàn)？


// 一、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
//  二、發(fā)短信，winphone系統(tǒng)無效
<a href="sms:10086">發(fā)短信給: 10086</a>
// 三、寫郵件
<a href="mailto:863139978@qq.com">點擊我發(fā)郵件</a>
//2.收件地址后添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點擊我發(fā)郵件</a>
//3.跟著抄送地址后，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點擊我發(fā)郵件</a>
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址
<a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]">點擊我發(fā)郵件</a>
//5.包含主題，用?subject=
<a href="mailto:863139978@qq.com?subject=郵件主題">點擊我發(fā)郵件</a>
//6.包含內(nèi)容，用?body=;如內(nèi)容包含文本，使用%0A給文本換行 
<a href="mailto:863139978@qq.com?body=郵件主題內(nèi)容%0A騰訊誠信%0A期待您的到來">點擊我發(fā)郵件</a>
//7.內(nèi)容包含鏈接，含http(s)://等的文本自動轉(zhuǎn)化為鏈接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">點擊我發(fā)郵件</a>
//8.內(nèi)容包含圖片（PC不支持）
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">點擊我發(fā)郵件</a>
//9.完整示例
<a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0A[url=http://www.baidu.com]http://www.baidu.com[/url]%0A%0A<img src='images/1.jpg' />">點擊我發(fā)郵件</a>
20.移動端touch事件（區(qū)分webkit和winphone）？

// 以下支持webkit
touchstart——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用event的preventDefault()可以阻止默認情況的發(fā)生：阻止頁面滾動
touchend——當(dāng)手指離開屏幕時觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用

//TouchEvent說明：
touches：屏幕上所有手指的信息
targetTouches：手指在目標區(qū)域的手指信息
changedTouches：最近一次觸發(fā)該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息，最好用于計算手指信息

//參數(shù)信息(changedTouches[0])
clientX、clientY在顯示區(qū)的坐標
target：當(dāng)前元素

//事件響應(yīng)順序
ontouchstart > ontouchmove > ontouchend > onclick


分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔