手機端頁面在項目中遇到的一些問題及解決辦法
前言:前段時間遇到點移動端的問題,網上查找點資料,看到一個挺不錯帖子,所以轉載分享給大家。
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; //記錄手指觸摸的移動中的坐標 //手指下滑,頁面到達頂端不能繼續下滑 if(endY>startY&& $(window).scrollTop()<=0){ e.preventDefault(); } //手指上滑,頁面到達底部能繼續上滑 if(endY<startY&& $(window).scrollTop()+ $(window).height()>=$(‘body‘)[0].scrollHeight){ e.preventDefault(); } })
有時也會碰見彈窗出來後兩個層的橡皮筋效果出現問題,我們可以在彈出彈出時給底層頁面加上一個類名,類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止,就不會影響彈窗層。
3.IOS 機型 margin 屬性無效問題?
(1) 設置 html body 的高度為百分比時,margin-bottom 在 safari 裏失效 (2) 直接 padding 代替 margin
4.Ios 綁定點擊事件不執行?
(1) 添加樣式 cursor :pointer。點擊後消除背景閃一下的 css:-webkit-tap-highlight-color:transparent;
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();
7.有時因為服務器或者別的原因導致頁面上的圖片沒有找到?
這是我們想需要用一個本地的圖片代替沒有找的的圖片
<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 元素.
9.ios 對 position: fixed 不太友好,有時我們需要加點處理?
在安卓上面,點擊頁面底部的輸入框,軟鍵盤彈出,頁面移動上移。 而 ios 上面,點擊頁面底部輸入框,軟鍵盤彈出,輸入框看不到了。。。查資料說什麽的都有,iscroll,jquery-moblie,absolute,fixe,static 都非常復雜,要改很多。。。 讓他彈出時讓滾動條在最低部
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" : "[email protected]" }; 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 /> // width 設置viewport寬度,為一個正整數,或字符串‘device-width’ // height 設置viewport高度,一般設置了寬度,會自動解析出高度,可以不用設置 // initial-scale 默認縮放比例,為一個數字,可以帶小數 // minimum-scale 允許用戶最小縮放比例,為一個數字,可以帶小數 // maximum-scale 允許用戶最大縮放比例,為一個數字,可以帶小數 // user-scalable 是否允許手動縮放 空白頁基本meta標簽 <!-- 設置縮放 --> <meta /> <!-- 可隱藏地址欄,僅針對IOS的Safari(註:IOS7.0版本以後,safari上已看不到效果) --> <meta /> <!-- 僅針對IOS的Safari頂端狀態條的樣式(可選default/black/black-translucent ) --> <meta /> <!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 --> <meta /> 其他meta標簽 <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta > <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 --> <meta > <!-- 微軟的老式瀏覽器 --> <meta > <!-- uc強制豎屏 --> <meta > <!-- QQ強制豎屏 --> <meta > <!-- UC強制全屏 --> <meta > <!-- QQ強制全屏 --> <meta > <!-- UC應用模式 --> <meta > <!-- QQ應用模式 --> <meta > <!-- windows phone 點擊無高光 --> <meta >
18.移動端如何定義字體 font-family?
@ -------------------------------------- 中文字體的英文名稱 @ 宋體 SimSun @ 黑體 SimHei @ 微信雅黑 Microsoft Yahei @ 微軟正黑體 Microsoft JhengHei @ 新宋體 NSimSun @ 新細明體 MingLiU @ 細明體 MingLiU @ 標楷體 DFKai-SB @ 仿宋 FangSong @ 楷體 KaiTi @ 仿宋GB2312 FangSongGB2312 @ 楷體GB2312 KaiTiGB2312 @ @ 說明:中文字體多數使用宋體、雅黑,英文用 Helvetica
body {font-family: Microsoft Yahei,SimSun,Helvetica;}
19.打電話發短信寫郵件怎麽實現?
// 一、打電話 <a href="tel:0755-10086">打電話給:0755-10086</a> // 二、發短信,winphone系統無效 <a href="sms:10086">發短信給: 10086</a> // 三、寫郵件 <a href="mailto:[email protected]">點擊我發郵件</a> //2.收件地址後添加?cc=開頭,可添加抄送地址(Android存在兼容問題) <a href="mailto:[email protected][email protected]">點擊我發郵件</a> //3.跟著抄送地址後,寫上&bcc=,可添加密件抄送地址(Android存在兼容問題) <a href="mailto:[email protected][email protected]&[email protected]">點擊我發郵件</a> //4.包含多個收件人、抄送、密件抄送人,用分號(;)隔開多個郵件人的地址 <a href="mailto:[email protected];[email protected]">點擊我發郵件</a> //5.包含主題,用?subject= <a href="mailto:[email protected]?subject=郵件主題">點擊我發郵件</a> //6.包含內容,用?body=;如內容包含文本,使用%0A給文本換行 <a href="mailto:[email protected]?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點擊我發郵件</a> //7.內容包含鏈接,含http(s)://等的文本自動轉化為鏈接 <a href="mailto:[email protected]?body=http://www.baidu.com">點擊我發郵件</a> //8.內容包含圖片(PC不支持) <a href="mailto:[email protected]?body=<img src=‘images/1.jpg‘ />">點擊我發郵件</a> //9.完整示例 <a href="mailto:[email protected];[email protected][email protected]&[email protected]&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 >去掉; //特殊說明:有些機型去除不了,如小米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 >
22.美化表單元素
// 一、使用 appearance 改變 webkit 瀏覽器的默認外觀 input,select {-webkit-appearance:none; appearance: none;} // 二、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;
打一波廣告,歡迎各位大神加入web交流群,拉拉人氣,感謝。
原文:https://segmentfault.com/a/1190000015178877 作者:鍵盤上的眼淚
手機端頁面在項目中遇到的一些問題及解決辦法