摘要:解決方案可以解決在手機(jī)上點(diǎn)擊事件的延遲的模塊,事件也是為了解決在的延遲問題顯示屏原理及設(shè)計(jì)方案說明屏是一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點(diǎn)由個(gè)變?yōu)槎鄠€(gè),如在同樣帶下的屏幕上,蘋果設(shè)備的顯示屏中,像素點(diǎn)個(gè)變?yōu)閭€(gè)。
Meta基礎(chǔ)知識:
H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度,并禁止用戶縮放頁面
//一、HTML頁面結(jié)構(gòu) // width 設(shè)置viewport寬度,為一個(gè)正整數(shù),或字符串‘device-width’ // height 設(shè)置viewport高度,一般設(shè)置了寬度,會(huì)自動(dòng)解析出高度,可以不用設(shè)置 // initial-scale 默認(rèn)縮放比例,為一個(gè)數(shù)字,可以帶小數(shù) // minimum-scale 允許用戶最小縮放比例,為一個(gè)數(shù)字,可以帶小數(shù) // maximum-scale 允許用戶最大縮放比例,為一個(gè)數(shù)字,可以帶小數(shù) // user-scalable 是否允許手動(dòng)縮放 //二、JS動(dòng)態(tài)判斷 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (d+.d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write(""); }else{ document.write(""); } } else { document.write(""); }
空白頁基本meta標(biāo)簽
其他meta標(biāo)簽
常見問題:
移動(dòng)端如何定義字體font-family
@ --------------------------------------中文字體的英文名稱 @ 宋體 SimSun @ 黑體 SimHei @ 微信雅黑 Microsoft Yahei @ 微軟正黑體 Microsoft JhengHei @ 新宋體 NSimSun @ 新細(xì)明體 MingLiU @ 細(xì)明體 MingLiU @ 標(biāo)楷體 DFKai-SB @ 仿宋 FangSong @ 楷體 KaiTi @ 仿宋_GB2312 FangSong_GB2312 @ 楷體_GB2312 KaiTi_GB2312 @ @ 說明:中文字體多數(shù)使用宋體、雅黑,英文用Helvetica body { font-family: Microsoft Yahei,SimSun,Helvetica; }
打電話發(fā)短信寫郵件怎么實(shí)現(xiàn)
// 一、打電話 打電話給:0755-10086 // 二、發(fā)短信,winphone系統(tǒng)無效 發(fā)短信給: 10086 // 三、寫郵件 //注:在添加這些功能時(shí),第一個(gè)功能以"?"開頭,后面的以"&"開頭 //1.普通郵件 點(diǎn)擊我發(fā)郵件 //2.收件地址后添加?cc=開頭,可添加抄送地址(Android存在兼容問題) 點(diǎn)擊我發(fā)郵件 //3.跟著抄送地址后,寫上&bcc=,可添加密件抄送地址(Android存在兼容問題) 點(diǎn)擊我發(fā)郵件 //4.包含多個(gè)收件人、抄送、密件抄送人,用分號(;)隔開多個(gè)郵件人的地址 點(diǎn)擊我發(fā)郵件 //5.包含主題,用?subject= 點(diǎn)擊我發(fā)郵件 //6.包含內(nèi)容,用?body=;如內(nèi)容包含文本,使用%0A給文本換行 點(diǎn)擊我發(fā)郵件 //7.內(nèi)容包含鏈接,含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接 點(diǎn)擊我發(fā)郵件 //8.內(nèi)容包含圖片(PC不支持) 點(diǎn)擊我發(fā)郵件 //9.完整示例 點(diǎn)擊我發(fā)郵件
移動(dòng)端touch事件(區(qū)分webkit和winphone)
/* 當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件 */ // 以下支持webkit touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指 touchmove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們再滑屏頁面,會(huì)調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生:阻止頁面滾動(dòng) touchend——當(dāng)手指離開屏幕時(shí)觸發(fā) touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過程中突然頁面alert()一個(gè)提示框,此時(shí)會(huì)觸發(fā)該事件,這個(gè)事件比較少用 //TouchEvent說明: touches:屏幕上所有手指的信息 targetTouches:手指在目標(biāo)區(qū)域的手指信息 changedTouches:最近一次觸發(fā)該事件的手指信息 touchend時(shí),touches與targetTouches信息會(huì)被刪除,changedTouches保存的最后一次的信息,最好用于計(jì)算手指信息 //參數(shù)信息(changedTouches[0]) clientX、clientY在顯示區(qū)的坐標(biāo) target:當(dāng)前元素 //事件響應(yīng)順序 ontouchstart > ontouchmove > ontouchend > onclick // 以下支持winphone 8 MSPointerDown——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指 MSPointerMove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們再滑屏頁面,會(huì)調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生:阻止頁面滾動(dòng) MSPointerUp——當(dāng)手指離開屏幕時(shí)觸發(fā)
移動(dòng)端click屏幕產(chǎn)生200-300ms的延時(shí)響應(yīng)
說明:移動(dòng)設(shè)備上的web網(wǎng)頁是有300ms延遲的,玩玩會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。 以下是歷史原因,來源一個(gè)公司內(nèi)一個(gè)同事的分享: 2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機(jī)端上,使用了雙擊縮放(double tap to zoom)的方案,比如你在手機(jī)上用瀏覽器打開一個(gè)PC上的網(wǎng)頁,你可能在看到頁面內(nèi)容雖然可以撐滿整個(gè)屏幕,但是字體、圖片都很小看不清,此時(shí)可以快速雙擊屏幕上的某一部分,你就能看清該部分放大后的內(nèi)容,再次雙擊后能回到原始狀態(tài)。 雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次,iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁縮放至原始比例。 原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上,當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候,例如跳轉(zhuǎn)鏈接,此處瀏覽器會(huì)先捕獲該次單擊,但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作,所以,捕獲第一次單擊后,瀏覽器會(huì)先Hold一段時(shí)間t,如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊,則瀏覽器會(huì)做單擊跳轉(zhuǎn)鏈接的處理,如果t時(shí)間里用戶進(jìn)行了第二次單擊操作,則瀏覽器會(huì)禁止跳轉(zhuǎn),轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作。那么這個(gè)時(shí)間區(qū)間t有多少呢?在IOS safari下,大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面,頁面需要過一段時(shí)間才響應(yīng),給用戶慢體驗(yàn)感覺,對于web開發(fā)者來說是,頁面js捕獲click事件的回調(diào)函數(shù)處理,需要300ms后才生效,也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。 //解決方案: fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲 zepto的touch模塊,tap事件也是為了解決在click的延遲問題
Rentina顯示屏原理及設(shè)計(jì)方案
說明:retina屏是一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè),如在同樣帶下的屏幕上,蘋果設(shè)備的retina顯示屏中,像素點(diǎn)1個(gè)變?yōu)?個(gè)。 在高清顯示屏中的位圖被放大,圖片會(huì)變得模糊,因此移動(dòng)端的視覺稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍。 那么,前端的應(yīng)對方案是:設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù),并使用backgroud-size把圖片縮小為原來的1/2 //例如圖片寬高為:200px*200px,那么寫法如下 .css{width:100px;height:100px;background-size:100px 100px;} //其它元素的取值為原來的1/2,例如視覺稿40px的字體,使用樣式的寫法為20px .css{font-size:20px} //image-set設(shè)計(jì)Rentina背景圖 image-set,webkit私有屬性,也是CSS4的屬性,為解決Rentina屏幕下的圖像而生。 .css { background: url(images/bg.jpg) no-repeat center; background: -webkit-image-set( url(images/bg.jpg) 1x, //支持image-set普通屏 url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan }
chrome表單自動(dòng)填充去掉input黃色背景解決方案
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; }
點(diǎn)擊元素產(chǎn)生背景或邊框怎么去掉
//ios用戶點(diǎn)擊一個(gè)鏈接,會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩; //android用戶點(diǎn)擊一個(gè)鏈接,會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果; //winphone系統(tǒng),點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景,能通過設(shè)置去掉; //特殊說明:有些機(jī)型去除不了,如小米2。對于按鈕類還有個(gè)辦法,不使用a或者input標(biāo)簽,直接用div標(biāo)簽 a,button,input,textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個(gè)副作用,就是輸入法不再能夠輸入多個(gè)字符 } // 也可以 * { -webkit-tap-highlight-color: rgba(0,0,0,0); } //winphone下
美化表單元素
//一、使用appearance改變webkit瀏覽器的默認(rèn)外觀 input,select { -webkit-appearance:none; appearance: none; } //二、winphone下,使用偽元素改變表單元素默認(rèn)外觀 //1.禁用select默認(rèn)箭頭,::-ms-expand修改表單控件下拉箭頭,設(shè)置隱藏并使用背景圖片來修飾 select::-ms-expand { display:none; } //2.禁用radio和checkbox默認(rèn)樣式,::-ms-check修改表單復(fù)選框或單選框默認(rèn)圖標(biāo),設(shè)置隱藏并使用背景圖片來修飾 input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display:none; } //3.禁用pc端表單輸入框默認(rèn)清除按鈕,::-ms-clear修改清除按鈕,設(shè)置隱藏并使用背景圖片來修飾 input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display:none; }
移動(dòng)端字體單位font-size選擇px還是rem
// 如需適配多種移動(dòng)設(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; }
超實(shí)用的CSS樣式
//去掉webkit的滾動(dòng)條——display: none; //其他參數(shù) ::-webkit-scrollba //滾動(dòng)條整體部分 ::-webkit-scrollbar-thumb //滾動(dòng)條內(nèi)的小方塊 ::-webkit-scrollbar-track //滾動(dòng)條軌道 ::-webkit-scrollbar-button //滾動(dòng)條軌道兩端按鈕 ::-webkit-scrollbar-track-piece //滾動(dòng)條中間部分,內(nèi)置軌道 ::-webkit-scrollbar-corner //邊角,兩個(gè)滾動(dòng)條交匯處 ::-webkit-resizer //兩個(gè)滾動(dòng)條的交匯處上用于通過拖動(dòng)調(diào)整元素大小的小控件 //去除Firefox按鈕和錨標(biāo)簽上的虛線輪廓 a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: 0; outline : 0; } // 禁止長按鏈接與圖片彈出菜單 a,img { -webkit-touch-callout: none } // 禁止ios和android用戶選中文字 html,body {-webkit-user-select:none; user-select: none; } // 改變輸入框placeholder的顏色值 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } input:focus::-webkit-input-placeholder{ color:#999; } // android上去掉語音輸入按鈕 input::-webkit-input-speech-button {display: none} // 阻止windows Phone的默認(rèn)觸摸事件 /*說明:winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無效的,可通過樣式來禁用,如:*/ html { -ms-touch-action:none; } //禁止winphone默認(rèn)觸摸事件
取消input在ios下,輸入的時(shí)候英文首字母的默認(rèn)大寫
手機(jī)拍照和上傳圖片
//IOS有拍照、錄像、選取本地圖片功能,部分Android只有選擇本地圖片功能。Winphone不支持
屏幕旋轉(zhuǎn)的事件和樣式
//JS處理 function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?"landscape":"portrait"; if(orientChk =="lapdscape"){ //這里是橫屏下需要執(zhí)行的事件 }else{ //這里是豎屏下需要執(zhí)行的事件 } } orientInit(); window.addEventListener("onorientationchange" in window?"orientationchange":"resize", function(){ setTimeout(orientInit, 100); },false) //CSS處理 //豎屏?xí)r樣式 @media all and (orientation:portrait){ } //橫屏?xí)r樣式 @media all and (orientation:landscape){ }
audio元素和video元素在ios和andriod中無法自動(dòng)播放
//音頻,寫法一 //音頻,寫法二 //JS綁定自動(dòng)播放(操作window時(shí),播放音樂) $(window).one("touchstart", function(){ music.play(); }) //微信下兼容處理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小結(jié) //1.audio元素的autoplay屬性在IOS及Android上無法使用,在PC端正常 //2.audio元素沒有設(shè)置controls時(shí),在IOS及Android會(huì)占據(jù)空間大小,而在PC端Chrome是不會(huì)占據(jù)任何空間
重力感應(yīng)事件
// 運(yùn)用HTML5的deviceMotion,調(diào)用重力感應(yīng)事件 if(window.DeviceMotionEvent){ document.addEventListener("devicemotion", deviceMotionHandler, false) } var speed = 30; var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData){ var acceleration = event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){ //這里是搖動(dòng)后要執(zhí)行的方法 yaoAfter(); } lastX = x; lastY = y; lastZ = z; } function yaoAfter(){ //do something } //說明:說見案例搖一搖效果中yao.js
微信瀏覽器用戶調(diào)整字體大小后頁面矬了,怎么阻止用戶調(diào)整
//以下代碼可使Android機(jī)頁面不再受用戶字體縮放強(qiáng)制改變大小,但是會(huì)有1S左右延時(shí),期間可以考慮loading來處理 if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize":0}, function(res){ alert(JSON.stringify(res)); }) }, 0) }); }else{ setTimeout(function(){ WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize":0}, function(res){ alert(JSON.stringify(res)); }) }, 0) } //IOS下可使用 -webkit-text-size-adjust禁止用戶調(diào)整字體大小 body { -webkit-text-size-adjust:100%!important; } //最好的解決方案:最好使用rem或百分比布局
定位的坑
//fixed定位 //1.ios下fixed元素容易定位出錯(cuò),軟鍵盤彈出時(shí),影響fixed元素定位 //2.android下fixed表現(xiàn)要比iOS更好,軟鍵盤彈出時(shí),不會(huì)影響fixed元素定位 //3.ios4下不支持position:fixed //解決方案:使用[Iscroll](http://cubiq.org/iscroll-5),如://position定位 //Android下彈出軟鍵盤彈出時(shí),影響absolute元素定位 //解決方案: var ua = navigator.userAgent.indexOf("Android"); if(ua>-1){ $(".ipt").on("focus", function(){ $(".css").css({"visibility":"hidden"}) }).on("blur", function(){ $(".css").css({"visibility":"visible"}) }) }.....
播放視頻不全屏
JS判斷設(shè)備
function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i0){ break; } } } deviceType(); window.addEventListener("resize", function(){ deviceType(); })
JS判斷微信瀏覽器
function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger"){ return true; }else{ return false; } }
android 2.3 bug
//1.@-webkit-keyframes 需要以0%開始100%結(jié)束,0%的百分號不能去掉 //2.after和before偽類無法使用動(dòng)畫animation //3.border-radius不支持%單位,如要兼容,可以給radius設(shè)置一下較大的值 //4.translate百分比的寫法和scale在一起會(huì)導(dǎo)致失效,例如: -webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
//1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫 //2.同時(shí)設(shè)置border-radius和背景色的時(shí)候,背景色會(huì)溢出到圓角以外部分 //3.部分手機(jī)(如三星),a鏈接支持鼠標(biāo):visited事件,也就是說鏈接訪問后文字變?yōu)樽仙?//4.android無法同時(shí)播放多音頻audio
消除transition閃屏
.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }
開啟硬件加速
//目前,像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速,當(dāng)檢測到某個(gè)DOM元素應(yīng)用了某些CSS規(guī)則時(shí)就會(huì)自動(dòng)開啟,從而解決頁面閃白,保證動(dòng)畫流暢。 .css { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
渲染優(yōu)化
//1.禁止使用iframe(阻塞父文檔onload事件) //2.禁止使用gif圖片實(shí)現(xiàn)loading效果(降低CPU消耗,提升渲染性能) //使用CSS3代碼代替JS動(dòng)畫; //開啟GPU加速; //使用base64位編碼圖片(對小圖而言,大圖不建議使用) // 對于一些小圖標(biāo),可以使用base64位編碼,以減少網(wǎng)絡(luò)請求。但不建議大圖使用,比較耗費(fèi)CPU。小圖標(biāo)優(yōu)勢在于: //1.減少HTTP請求; //2.避免文件跨域; //3.修改及時(shí)生效;常用的移動(dòng)端框架
zepto.js
官網(wǎng)
中文網(wǎng)
瀏覽器檢測
tap事件
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49861.html
摘要:騰訊地圖提供的只提供了經(jīng)緯度定位,而產(chǎn)品需要的是確認(rèn)定位后獲取城市,進(jìn)行同城商品檢索阿里云對象儲(chǔ)存處理文件上傳,比較意外的是騰訊對阿里云的域名前綴進(jìn)行了封禁后臺不能配置,解決方案是讓后臺將該域名進(jìn)行服務(wù)器域名代理。 mpvue開發(fā)小程序所遇問題及h5轉(zhuǎn)化方案 項(xiàng)目結(jié)構(gòu) |---build |---pages.js文件目錄 |---src ...
摘要:目錄不要過度依賴一前端掘金毫無疑問,是一款非常優(yōu)秀的庫,它讓我們開發(fā)項(xiàng)目變得更加便捷容易。但是作為一個(gè)前端工作者,我們肯定也希望在我們的網(wǎng)頁里也能看到這么酷分鐘搞定常用基礎(chǔ)知識前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開發(fā)中,已經(jīng)非常普及了。 跨域解決方案總結(jié) - 前端 - 掘金為什么需要跨域? 就得先知道同源策略. 同源策略 同源策略是為了保證數(shù)據(jù)的安全性,一個(gè)域的腳本不能去操作另外一個(gè)域的腳本的...
摘要:模式部署沒有什么問題,只要訪問到服務(wù)器上的,就可以訪問網(wǎng)站了。問題起因在做年度賬單項(xiàng)目的時(shí)候,項(xiàng)目部署的時(shí)候,用的是模式。這樣幾項(xiàng)配置后,就可以在子目錄下訪問網(wǎng)站,刷新也沒有問題。 寫在前面 Vue-Router 有兩種模式,默認(rèn)是 hash 模式,另外一種是 history 模式。 hash:也就是地址欄里的 # 符號。比如 http://www.example/#/hello,...
閱讀 3157·2023-04-25 18:22
閱讀 2390·2021-11-17 09:33
閱讀 3307·2021-10-11 10:59
閱讀 3238·2021-09-22 15:50
閱讀 2810·2021-09-10 10:50
閱讀 860·2019-08-30 15:53
閱讀 449·2019-08-29 11:21
閱讀 2909·2019-08-26 13:58