摘要:解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時,光標高度與的一致。
1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?
首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案是:
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滾動的容器中增加:-webkit-overflow-scrolling: touch或者給body增加:body {overflow-x: hidden}。
(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=$("body")[0].scrollHeight){ e.preventDefault(); } })
有時也會碰見彈窗出來后兩個層的橡皮筋效果出現(xiàn)問題,我們可以在彈出彈出時給底層頁面加上一個類名,類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止,就不會影響彈窗層。
3.IOS機型margin屬性無效問題?(1) 設(shè)置html body的高度為百分比時,margin-bottom在safari里失效
(2) 直接padding代替margin
(1)添加樣式cursor :pointer。點擊后消除背景閃一下的css:-webkit-tap-highlight-color:transparent;
5.Ios鍵盤換行變?yōu)樗阉鳎?/b>首先,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();
這是我們想需要用一個本地的圖片代替沒有找的的圖片
8.transform屬性影響position:fixed?
(1)規(guī)范中有規(guī)定:如果元素的transform值不為none,則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1不只在手機上,電腦上也一樣。除了fixed元素會受影響之外,z-index(層疊上下文)值也會受影響。絕對定位元素等和包含塊有關(guān)的屬性都會受到影響。當然如果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定義:返回一個對象可枚舉屬性的字符串數(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ù)字的驗證有兩個:
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();
// 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標簽 其他meta標簽
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)?// 一、打電話 打電話給:0755-10086 // 二、發(fā)短信,winphone系統(tǒng)無效 發(fā)短信給: 10086 // 三、寫郵件 點擊我發(fā)郵件 //2.收件地址后添加?cc=開頭,可添加抄送地址(Android存在兼容問題) 點擊我發(fā)郵件 //3.跟著抄送地址后,寫上&bcc=,可添加密件抄送地址(Android存在兼容問題) 點擊我發(fā)郵件 //4.包含多個收件人、抄送、密件抄送人,用分號(;)隔開多個郵件人的地址 點擊我發(fā)郵件 //5.包含主題,用?subject= 點擊我發(fā)郵件 //6.包含內(nèi)容,用?body=;如內(nèi)容包含文本,使用%0A給文本換行 點擊我發(fā)郵件 //7.內(nèi)容包含鏈接,含http(s)://等的文本自動轉(zhuǎn)化為鏈接 點擊我發(fā)郵件 //8.內(nèi)容包含圖片(PC不支持) 點擊我發(fā)郵件 //9.完整示例 點擊我發(fā)郵件20.移動端touch事件(區(qū)分webkit和winphone)?
// 以下支持webkit
touchstart——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指
touchmove——當手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面,會調(diào)用event的preventDefault()可以阻止默認情況的發(fā)生:阻止頁面滾動
touchend——當手指離開屏幕時觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框,此時會觸發(fā)該事件,這個事件比較少用
//TouchEvent說明:
touches:屏幕上所有手指的信息
targetTouches:手指在目標區(qū)域的手指信息
changedTouches:最近一次觸發(fā)該事件的手指信息
touchend時,touches與targetTouches信息會被刪除,changedTouches保存的最后一次的信息,最好用于計算手指信息
//參數(shù)信息(changedTouches[0])
clientX、clientY在顯示區(qū)的坐標
target:當前元素
//事件響應(yīng)順序
ontouchstart > ontouchmove > ontouchend > onclick
//ios用戶點擊一個鏈接,會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩; //android用戶點擊一個鏈接,會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果; //winphone系統(tǒng),點擊標簽產(chǎn)生的灰色半透明背景,能通過設(shè)置去掉; //特殊說明:有些機型去除不了,如小米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下22.美化表單元素
//一、使用appearance改變webkit瀏覽器的默認外觀
input,select { -webkit-appearance:none; appearance: none; }
//二、winphone下,使用偽元素改變表單元素默認外觀
//1.禁用select默認箭頭,::-ms-expand修改表單控件下拉箭頭,設(shè)置隱藏并使用背景圖片來修飾
select::-ms-expand { display:none; }
//2.禁用radio和checkbox默認樣式,::-ms-check修改表單復(fù)選框或單選框默認圖標,設(shè)置隱藏并使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
//3.禁用pc端表單輸入框默認清除按鈕,::-ms-clear修改清除按鈕,設(shè)置隱藏并使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
// 如需適配多種移動設(shè)備,建議使用rem。以下為參考值:
html { font-size: 62.5%; } //10*16 = 62.5%
//設(shè)置12px字體 這里注意在rem前要加上對應(yīng)的px值,解決不支持rem的瀏覽器的兼容問題,做到優(yōu)雅降級
body { font-size:12px; font-size:1.2rem; }
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頂部到文字底部(這兩種情況都是在有設(shè)定line-height的時候),如果沒有l(wèi)ine-height,則是與font-size一致。
IOS中情況和Chrome 相似。
設(shè)置字體大小和行高一致,然后通過 padding 撐開大小
只給IE瀏覽器設(shè)置 line-height
-ms-line-height:40px;
go(-1): 返回上一頁,原頁面表單中的內(nèi)容會丟失,是個新頁面。
back(): 返回上一頁,原頁表表單中的內(nèi)容會保留。
不同的瀏覽器的后退行為也是有區(qū)別的:
chrome和ff瀏覽器后退頁面,會刷新后退的頁面,若有數(shù)據(jù)請求也會提交數(shù)據(jù)申請。類似于
history.go(-1) 。
而safari(包括桌面版和ipad版本)的后退按鈕則不會刷新頁面,也不會提交數(shù)據(jù)申請。類似于
Javascript:history.back()。
button標簽替代input時注意,不寫type是會出現(xiàn)很多問題。
1.如果button標簽在from里 button 默認類型是submit點擊時會提交from。
2.有時給button綁定的點擊事件會多次執(zhí)行。
獲取button值,ie瀏覽器獲取的是button間的值,其他獲取的value的值
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52480.html
摘要:解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時,光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
摘要:解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時,光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
摘要:資料整理關(guān)于配置微信小程序頁面附關(guān)于微信搜索小程序內(nèi)頁面的功能,只能在線上環(huán)境有用,而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件,層級比普通組件高。 大綱:根據(jù)近期我在小程序開發(fā)中接到的需求,總結(jié)一下下面四個開發(fā)需求所遇到的問題: 1、關(guān)于微信現(xiàn)已開放小程序內(nèi)搜索(sitemap 配置);2、微信小程序的激勵視頻廣告...
閱讀 2344·2021-11-23 09:51
閱讀 1999·2021-10-14 09:43
閱讀 2760·2021-09-27 13:35
閱讀 1144·2021-09-22 15:54
閱讀 2495·2021-09-13 10:36
閱讀 3784·2019-08-30 15:56
閱讀 3404·2019-08-30 14:09
閱讀 1711·2019-08-30 12:57