摘要:基礎(chǔ)知識頁面窗口自動調(diào)整到設(shè)備寬度,并禁止用戶縮放頁面忽略將頁面中的數(shù)字識別為電話號碼忽略平臺中對郵箱地址的識別當(dāng)網(wǎng)站添加到主屏幕快速啟動方式,可隱藏地址欄,僅針對的版本以后,上已看不到效果將網(wǎng)站添加到主屏幕快
meta基礎(chǔ)知識
H5頁面窗口自動調(diào)整到設(shè)備寬度,并禁止用戶縮放頁面
忽略將頁面中的數(shù)字識別為電話號碼
忽略Android平臺中對郵箱地址的識別
當(dāng)網(wǎng)站添加到主屏幕快速啟動方式,可隱藏地址欄,僅針對ios的safari
將網(wǎng)站添加到主屏幕快速啟動方式,僅針對ios的safari頂端狀態(tài)條的樣式
viewport模板
viewport模板——通用
標(biāo)題 這里開始內(nèi)容
viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持
標(biāo)題 這里開始內(nèi)容
參考案例:http://action.weixin.qq.com/p...
常見問題
移動端如何定義字體font-family
中文字體使用系統(tǒng)默認(rèn)即可,英文用Helvetica
/* 移動端定義字體的代碼 */ body{font-family:Helvetica;}
參考《移動端使用字體的思考》
移動端字體單位font-size選擇px還是rem
對于只需要適配少部分手機設(shè)備,且分辨率對頁面影響不大的,使用px即可
對于需要適配各種移動設(shè)備,使用rem,例如只需要適配iphone和iPad等分辨率差別比較挺大的設(shè)備
rem配置參考:
html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}}
移動端touch事件(區(qū)分webkit 和 winphone)
當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件
以下支持webkit
touchstart——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面,會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生:阻止頁面滾動
touchend——當(dāng)手指離開屏幕時觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框,此時會觸發(fā)該事件,這個事件比較少用
TouchEvent
touches:屏幕上所有手指的信息
targetTouches:手指在目標(biāo)區(qū)域的手指信息
changedTouches:最近一次觸發(fā)該事件的手指信息
touchend時,touches與targetTouches信息會被刪除,changedTouches保存的最后一次的信息,最好用于計算手指信息
參數(shù)信息(changedTouches[0])
clientX、clientY在顯示區(qū)的坐標(biāo)
target:當(dāng)前元素
參考:https://developer.mozilla.org...
以下支持winphone 8
MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指
MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面,會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生:阻止頁面滾動
MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)
移動端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)
移動設(shè)備上的web網(wǎng)頁是有300ms延遲的,玩玩會造成按鈕點擊延遲甚至是點擊失效。
以下是歷史原因,來源一個公司內(nèi)一個同事的分享:
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機端上,使用了雙擊縮放(double tap to zoom)的方案,比如你在手機上用瀏覽器打開一個PC上的網(wǎng)頁,你可能在看到頁面內(nèi)容雖然可以撐滿整個屏幕,但是字體、圖片都很小看不清,此時可以快速雙擊屏幕上的某一部分,你就能看清該部分放大后的內(nèi)容,再次雙擊后能回到原始狀態(tài)。
雙擊縮放是指用手指在屏幕上快速點擊兩次,iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點擊上,當(dāng)用戶在屏幕上單擊某一個元素時候,例如跳轉(zhuǎn)鏈接,此處瀏覽器會先捕獲該次單擊,但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作,所以,捕獲第一次單擊后,瀏覽器會先Hold一段時間t,如果在t時間區(qū)間里用戶未進(jìn)行下一次點擊,則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理,如果t時間里用戶進(jìn)行了第二次單擊操作,則瀏覽器會禁止跳轉(zhuǎn),轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢?在IOS safari下,大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面,頁面需要過一段時間才響應(yīng),給用戶慢體驗感覺,對于web開發(fā)者來說是,頁面JS捕獲click事件的回調(diào)函數(shù)處理,需要300ms后才生效,也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。
解決方案:
fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊,tap事件也是為了解決在click的延遲問題
觸摸事件的響應(yīng)順序
ontouchstart
ontouchmove
ontouchend
onclick
解決300ms延遲的問題,也可以通過綁定ontouchstart事件,加快對事件的響應(yīng)
什么是Retina 顯示屏,帶來了什么問題
retina:一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€,如在同樣帶下的屏幕上,蘋果設(shè)備的retina顯示屏中,像素點1個變?yōu)?個
在高清顯示屏中的位圖被放大,圖片會變得模糊,因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍
那么,前端的應(yīng)對方案是:
設(shè)計稿切出來的圖片長寬保證為偶數(shù),并使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為:200px*200px,那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2,例如視覺稿40px的字體,使用樣式的寫法為20px
.css{font-size:20px}
參考《高清顯示屏原理及設(shè)計方案》
ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉
ios用戶點擊一個鏈接,會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用,可設(shè)置-webkit-tap-highlight-color的alpha值為0,也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
部分android系統(tǒng)中元素被點擊時產(chǎn)生的邊框怎么去掉
android用戶點擊一個鏈接,會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣,可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0原文來自http://caibaojian.com/mobile-knowledge.html -webkit-user-modify:read-write-plaintext-only; }
-webkit-user-modify有個副作用,就是輸入法不再能夠輸入多個字符
另外,有些機型去除不了,如小米2
對于按鈕類還有個辦法,不使用a或者input標(biāo)簽,直接用div標(biāo)簽
參考《如何去除android上a標(biāo)簽產(chǎn)生的邊框》
winphone系統(tǒng)a、input標(biāo)簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉
webkit表單元素的默認(rèn)外觀怎么重置
.css{-webkit-appearance:none;}
webkit表單輸入框placeholder的顏色值能改變么
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
webkit表單輸入框placeholder的文字能換行么
ios可以,android不行~
在textarea標(biāo)簽下都可以換行~
IE10(winphone8)表單元素默認(rèn)外觀如何重置
禁用 select 默認(rèn)下拉箭頭
::-ms-expand 適用于表單選擇控件下拉箭頭的修改,有多個屬性值,設(shè)置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
select::-ms-expand { display: none; }
禁用 radio 和 checkbox 默認(rèn)樣式
::-ms-check 適用于表單復(fù)選框或單選按鈕默認(rèn)圖標(biāo)的修改,同樣有多個屬性值,設(shè)置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display: none; }
禁用PC端表單輸入框默認(rèn)清除按鈕
當(dāng)表單文本輸入框輸入內(nèi)容后會顯示文本清除按鈕,::-ms-clear 適用于該清除按鈕的修改,同樣設(shè)置使它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display: none; }
禁止ios 長按時不觸發(fā)系統(tǒng)的菜單,禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}
禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
參考《如何改變表單元素的外觀(for Webkit and IE10)》
打電話發(fā)短信寫郵件怎么實現(xiàn)
打電話
打電話給:0755-10086
發(fā)短信,winphone系統(tǒng)無效
發(fā)短信給: 10086
寫郵件,可參考《移動web頁面給用戶發(fā)送郵件的方法》
peun@foxmail.com
模擬按鈕hover效果
移動端觸摸按鈕的效果,可明示用戶有些事情正要發(fā)生,是一個比較好體驗,但是移動設(shè)備中并沒有鼠標(biāo)指針,使用css的hover并不能滿足我們的需求,還好國外有個激活css的active效果,代碼如下,
按鈕
兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的辦法,可通過綁定ontouchstart和ontouchend來控制按鈕的類名
按鈕屏幕旋轉(zhuǎn)的事件和樣式
事件
window.orientation,取值:正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式;window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; } }樣式
//豎屏?xí)r使用的樣式 @media all and (orientation:portrait) { .css{} } //橫屏?xí)r使用的樣式 @media all and (orientation:landscape) { .css{} }audio元素和video元素在ios和andriod中無法自動播放
應(yīng)對方案:觸屏即播$("html").one("touchstart",function(){ audio.play() })可參考《無法自動播放的audio元素》
搖一搖功能
HTML5 deviceMotion:封裝了運動傳感器數(shù)據(jù)的事件,可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。手機拍照和上傳圖片
的accept 屬性使用總結(jié):
ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認(rèn)外觀丑陋
微信瀏覽器用戶調(diào)整字體大小后頁面矬了,怎么阻止用戶調(diào)整
原因android側(cè)是復(fù)寫了layoutinflater 對textview做了統(tǒng)一處理
ios側(cè)是修改了body.style.webkitTextSizeAdjust值
解決方案:android使用以下代碼,該接口只在微信瀏覽器下有效(感謝jationhuang同學(xué)提供)
/**
頁面加入這段代碼可使Android機器頁面不再受到用戶字體縮放強制改變大小
但是會有一個1秒左右的延遲,期間可以考慮通過loading展示
僅供參考
*/(function(){ 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或者百分比布局
消除transition閃屏
網(wǎng)絡(luò)都是這么寫的,但我并沒有測試出來.css{ /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn):保留 3D*/ -webkit-transform-style: preserve-3d; /*(設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時是否可見:隱藏)*/ -webkit-backface-visibility: hidden; }開啟硬件加速
解決頁面閃白
保證動畫流暢.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }參考《用CSS開啟硬件加速來提高網(wǎng)站性能》
取消input在ios下,輸入的時候英文首字母的默認(rèn)大寫
android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}android 2.3 bug
@-webkit-keyframes 需要以0%開始100%結(jié)束,0%的百分號不能去掉
after和before偽類無法使用動畫animation
border-radius不支持%單位
translate百分比的寫法和scale在一起會導(dǎo)致失效,例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
同時設(shè)置border-radius和背景色的時候,背景色會溢出到圓角以外部分
部分手機(如三星),a鏈接支持鼠標(biāo):visited事件,也就是說鏈接訪問后文字變?yōu)樽仙?br>android無法同時播放多音頻audio
參考《border-radius 移動之傷》設(shè)計高性能css3動畫的幾個要素
盡可能地使用合成屬性transform和opacity來設(shè)計CSS3動畫,不使用position的left和top來定位
利用translate3D開啟GPU加速
參考《High Performance Animations》fixed bug
ios下fixed元素容易定位出錯,軟鍵盤彈出時,影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好,軟鍵盤彈出時,不會影響fixed元素定位
ios4下不支持position:fixed
解決方案可用isroll.js,暫無完美方案
參考《移動端web頁面使用position:fixed問題總結(jié)》
《使用iScroll.js解決ios4下不支持position:fixed的問題》
如何阻止windows Phone的默認(rèn)觸摸事件
winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無效的目前解決方法是使用樣式來禁用
html{-ms-touch-action: none;}/* 禁止winphone默認(rèn)觸摸事件 */參考
《Windows phone 8 touch support》
播放視頻不全屏
常用的移動端框架
zepto.js語法與jquery幾乎一樣,會jquery基本會zepto~
最新版本已經(jīng)更新到1.16
官網(wǎng):http://zeptojs.com/
中文(非官網(wǎng)):http://www.css88.com/doc/zept...
常使用的擴(kuò)展模塊:
瀏覽器檢測:https://github.com/madrobby/z...
tap事件:https://github.com/madrobby/z...
iscroll.js
解決頁面不支持彈性滾動,不支持fixed引起的問題~
實現(xiàn)下拉刷新,滑屏,縮放等功能~
最新版本已經(jīng)更新到5.0
官網(wǎng):http://cubiq.org/iscroll-5
underscore.js
筆者沒用過,不過聽說好用,推薦給大家~
該庫提供了一整套函數(shù)式編程的實用功能,但是沒有擴(kuò)展任何javascript內(nèi)置對象。
最新版本已經(jīng)更新到1.8.2
官網(wǎng):http://underscorejs.org/
滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
flex布局
flex布局目前可使用在移動中,并非所有的語法都全兼容,但以下寫法筆者實踐過,效果良好~flex:定義布局為盒模型 flex-v:盒模型垂直布局 flex-1:子元素占據(jù)剩余的空間 flex-align-center:子元素垂直居中 flex-pack-center:子元素水平居中 flex-pack-justify:子元素兩端對齊 兼容性:ios 4+、android 2.3+、winphone8+ ============================================================ */ .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}示例:兩端對齊
模塊一模塊二模塊三模塊四使用注意:flex下的子元素必須為塊級元素,非塊級元素在android2.3機器下flex失效
參考:
flexyboxes
“老”的Flexbox和“新”的Flexbox
跨瀏覽器的Flexbox
FastClick
消除在移動瀏覽器上觸發(fā)click事件與一個物理Tap(敲擊)之間的300延遲
參考《FastClick》
轉(zhuǎn)載:http://peunzhang.cnblogs.com/
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49996.html
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
摘要:前言月份開始出沒社區(qū),現(xiàn)在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準(zhǔn)備轉(zhuǎn)正了一般來說,差不多到了轉(zhuǎn)正的時候,會進(jìn)行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現(xiàn)在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準(zhǔn)備轉(zhuǎn)正了!一般來說,差不多到了轉(zhuǎn)正的時候,會進(jìn)行總結(jié)或者分享會議!那么今天我就...
摘要:實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配,不同的公司不同的團(tuán)隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格,實際上是你將一個元素聲明為一個網(wǎng)格容器,并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
閱讀 2570·2021-09-06 15:02
閱讀 3200·2021-09-02 10:18
閱讀 2821·2019-08-30 15:44
閱讀 685·2019-08-30 15:43
閱讀 1948·2019-08-30 14:08
閱讀 2758·2019-08-30 13:16
閱讀 1397·2019-08-26 13:52
閱讀 931·2019-08-26 12:21