TML5有一個重要特性:DeviceOrientation,它將底層的方向和運動傳感器進行了高級封裝,它使我們能夠很容易的實現(xiàn)重力感應(yīng)、指南針等有趣的功能。
前面介紹了html5重力感應(yīng)的基本原理:
html5重力感應(yīng)剖析附源碼
本文將結(jié)合實例給大家介紹使用HTML5的重力運動和方向傳感器實現(xiàn)手機搖一搖效果。
DeviceOrientation包括兩個事件:
1、deviceOrientation:封裝了方向傳感器數(shù)據(jù)的事件,可以獲取手機靜止?fàn)顟B(tài)下的方向數(shù)據(jù),例如手機所處角度、方位、朝向等。
2、deviceMotion:封裝了運動傳感器數(shù)據(jù)的事件,可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。
HTML
頁面上有一個div#hand,用來放置一個手搖的圖片,div#result用來展示搖動后的結(jié)果信息。
<div id="hand" class="hand hand-animate"></div>
<div id="result"></div>
復(fù)制代碼
我們可以使用CSS3來增強頁面效果,使用-webkit-animation動畫效果實現(xiàn)手搖圖片的動態(tài)效果,具體請下載源代碼查看。
Javascript
“搖一搖”這個動作即“一定時間內(nèi)設(shè)備了一定距離”,因此通過devicemotion監(jiān)聽設(shè)備晃動獲取到的x, y, z軸的 值在一定時間范圍內(nèi)的變化率,即判斷設(shè)備是否有進行晃動。而為了防止正常移動的誤判,需要給該變化率設(shè)置一個合適的臨界值。
HTML5判斷設(shè)備晃動的代碼我們使用已經(jīng)封裝好的shake.js,項目地址:https://github.com/alexgibson/shake.js。
<script src="shake.js"></script>
復(fù)制代碼
首先實例化Shake,然后啟動開始監(jiān)聽設(shè)備運動情況,監(jiān)聽設(shè)備運動,回調(diào)監(jiān)聽結(jié)果:shakeEventDidOccur。
window.onload = function() {
var myShakeEvent = new Shake({
threshold: 15
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
var result = document.getElementById("result");
result.className = "result";
var arr = ['妹子一枚','福利圖片一套','碼農(nóng)筆記一本','土豪金一臺'];
var num = Math.floor(Math.random()*4);
result.innerHTML = "恭喜,搖得"+arr[num]+"!";
setTimeout(function(){
result.className = "result result-show";
}, 1000);
}
};
這里,函數(shù)shakeEventDidOccur()可以自定義,本例是將搖晃后的結(jié)果返回在頁面上展示出來,請看DEMO演示。
http://bbs.qietu.com/html/yaoyiyao/
所周知,微信有一個非常好玩且神奇的功能——搖一搖。我們可以通過搖一搖來進行互動,可以與搖到的人打招呼,查看同時搖晃手機的人
剛進入時,微信會給我們兩點提示:一個是告訴我們使用搖一搖的功能,可以找到這個世界上同樣在搖晃手機的朋友,另外一個就是不要輕易相信搖到的陌生人,加好友時要謹(jǐn)慎核實對方身份。如果對方發(fā)布的信息對我們造成了很大困擾,可以立即向微信官方進行投訴。
那么“搖一搖”功能,微信到底是怎么捕捉到的?其實應(yīng)該是用Accelerometer API模擬的。基本思想是利用傳感器每隔一小段時間記錄x,y,z加速度,和上一次記錄的值對比,看有沒有動,但具體怎么實現(xiàn)要試了才知道。iOS 4.2+ HTML5可直接調(diào)用此API,但是做的時候要注意比如限制查詢頻率等優(yōu)化。
這也意味著,使用搖一搖功能需要這幾個條件:手機本身支持安裝使用微信;手機有重力傳感器,并且能正常工作。
其實,現(xiàn)在市面上大部門智能手機都有重力感應(yīng)的功能,只要能微信與手機兼容基本上都可使用搖一搖功能。如果是非智能手機的話,則是無法使用微信的。
微信的搖一搖還有一個神奇的功能,那就是可以識別正在你正在觀看的電視,并且可以參與實時互動,不同的電視臺的互動方式也不同的,每次我們都可以發(fā)現(xiàn)不同的驚喜。
如果識別出來,微信會自動進入正在電視臺互動的頁面,比如我們可以同意登陸進行互動。如果識別失敗了,或者電視臺這時沒有互動的話,微信也會提示我們的。
信ID:WEB_wysj(點擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
(頁底留言開放,歡迎來吐槽)
● ● ●
META相關(guān)
1. 添加到主屏后的標(biāo)題(IOS)
<meta name="apple-mobile-web-app-title" content="標(biāo)題">
2. 啟用 WebApp 全屏模式(IOS)
當(dāng)網(wǎng)站添加到主屏幕后再點擊進行啟動時,可隱藏地址欄(從瀏覽器跳轉(zhuǎn)或輸入鏈接進入并沒有此效果)
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!--more-->
3. 百度禁止轉(zhuǎn)碼
通過百度手機打開網(wǎng)頁時,百度可能會對你的網(wǎng)頁進行轉(zhuǎn)碼,往你頁面貼上它的廣告,非常之惡心。不過我們可以通過這個meta標(biāo)簽來禁止它:
<meta http-equiv="Cache-Control" content="no-siteapp" />
百度SiteApp轉(zhuǎn)碼聲明
4. 設(shè)置狀態(tài)欄的背景顏色(IOS)
設(shè)置狀態(tài)欄的背景顏色,只有在 "apple-mobile-web-app-capable" content="yes" 時生效
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content 參數(shù):
default :狀態(tài)欄背景是白色。
black :狀態(tài)欄背景是黑色。
black-translucent :狀態(tài)欄背景是半透明。 如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。 如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個屏幕,頂部會被狀態(tài)欄遮擋。
5. 移動端手機號碼識別(IOS)
在 iOS Safari (其他瀏覽器和Android均不會)上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接,比如:
7位數(shù)字,形如:1234567
帶括號及加號的數(shù)字,形如:(+86)123456789
雙連接線的數(shù)字,形如:00-00-00111
11位數(shù)字,形如:13800138000
可能還有其他類型的數(shù)字也會被識別。我們可以通過如下的meta來關(guān)閉電話號碼的自動識別:
<meta name="format-detection" content="telephone=no" />
開啟電話功能
<a href="tel:123456">123456</a>
開啟短信功能:
<a href="sms:123456">123456</a>
6. 移動端郵箱識別(Android)
與電話號碼的識別一樣,在安卓上會對符合郵箱格式的字符串進行識別,我們可以通過如下的meta來管別郵箱的自動識別:
<meta content="email=no" name="format-detection" />
同樣地,我們也可以通過標(biāo)簽屬性來開啟長按郵箱地址彈出郵件發(fā)送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
7. 添加智能 App 廣告條 Smart App Banner(IOS 6+ Safari)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
8. IOS Web app啟動動畫
由于iPad 的啟動畫面是不包括狀態(tài)欄區(qū)域的。所以啟動圖片需要減去狀態(tài)欄區(qū)域所對應(yīng)的方向上的20px大小,相應(yīng)地在retina設(shè)備上要減去40px的大小
<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
(landscape:橫屏 | portrait:豎屏)
9. 添加到主屏后的APP圖標(biāo)
指定web app添加到主屏后的圖標(biāo)路徑,有兩種略微不同的方式:
<!-- 設(shè)計原圖 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">
* apple-touch-icon:在IOS6及以下的版本會自動為圖標(biāo)添加一層高光效果(IOS7開始已使用扁平化的設(shè)計風(fēng)格) * apple-touch-icon-precomposed:使用“設(shè)計原圖圖標(biāo)”
效果:
圖標(biāo)尺寸:
可通過指定size屬性來為不同的設(shè)備提供不同的圖標(biāo)(但通常來說,我們只需提供一個114 x 114 pixels大小的圖標(biāo)即可 )
官方說明如下
Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
10. 優(yōu)先使用最新版本 IE 和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
11.viewport模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>標(biāo)題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
這里開始內(nèi)容
</body>
</html>
常見問題
1、移動端如何定義字體font-family
三大手機系統(tǒng)的字體:
ios 系統(tǒng)
默認(rèn)中文字體是Heiti SC
默認(rèn)英文字體是Helvetica
默認(rèn)數(shù)字字體是HelveticaNeue
無微軟雅黑字體
android 系統(tǒng)
默認(rèn)中文字體是Droidsansfallback
默認(rèn)英文和數(shù)字字體是Droid Sans
無微軟雅黑字體
winphone 系統(tǒng)
默認(rèn)中文字體是Dengxian(方正等線體)
默認(rèn)英文和數(shù)字字體是Segoe
無微軟雅黑字體
各個手機系統(tǒng)有自己的默認(rèn)字體,且都不支持微軟雅黑 如無特殊需求,手機端無需定義中文字體,使用系統(tǒng)默認(rèn) 英文字體和數(shù)字字體可使用 Helvetica ,三種系統(tǒng)都支持
* 移動端定義字體的代碼 */
body{font-family:Helvetica;}
2、移動端字體單位font-size選擇px還是rem
對于只需要適配手機設(shè)備,使用px即可
對于需要適配各種移動設(shè)備,使用rem,例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備
rem配置參考:
html {font-size:10px}
@media screen and (min-width:480px) 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) and (max-width:959px) {
html {
font-size: 25px
@media screen and (min-width:960px) and (max-width:1079px) {
html {
font-size: 30px
@media screen and (min-width:1080px) {
html {
font-size: 32px
3、移動端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ā)該事件,這個事件比較少用
以下支持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ā)
4、移動端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)
移動設(shè)備上的web網(wǎng)頁是有300ms延遲的,玩玩會造成按鈕點擊延遲甚至是點擊失效。
以下是歷史原因:
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)鏈接<a href="#"></a>,此處瀏覽器會先捕獲該次單擊,但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進行縮放操作,所以,捕獲第一次單擊后,瀏覽器會先Hold一段時間t,如果在t時間區(qū)間里用戶未進行下一次點擊,則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理,如果t時間里用戶進行了第二次單擊操作,則瀏覽器會禁止跳轉(zhuǎn),轉(zhuǎ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)順序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解決300ms延遲的問題,也可以通過綁定ontouchstart事件,加快對事件的響應(yīng)
5、什么是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}
6、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;)}
7、部分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;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個副作用,就是輸入法不再能夠輸入多個字符
另外,有些機型去除不了,如小米2
對于按鈕類還有個辦法,不使用a或者input標(biāo)簽,直接用div標(biāo)簽
8、winphone系統(tǒng)a、input標(biāo)簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
9、webkit表單元素的默認(rèn)外觀怎么重置
.css{-webkit-appearance:none;}
10、webkit表單輸入框placeholder的顏色值能改變么
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
11、webkit表單輸入框placeholder的文字能換行么
ios可以,android不行~
12. 關(guān)閉iOS鍵盤首字母自動大寫
在iOS中,默認(rèn)情況下鍵盤是開啟首字母大寫的功能的,如果啟用這個功能,可以這樣:
<input type="text" autocapitalize="off" />
13. 關(guān)閉iOS輸入自動修正
和英文輸入默認(rèn)自動首字母大寫那樣,IOS還做了一個功能,默認(rèn)輸入法會開啟自動修正輸入內(nèi)容,這樣的話,用戶經(jīng)常要操作兩次。如果不希望開啟此功能,我們可以通過input標(biāo)簽屬性來關(guān)閉掉:
<input type="text" autocorrect="off" />
14. 禁止文本縮放
當(dāng)移動設(shè)備橫豎屏切換時,文本的大小會重新計算,進行相應(yīng)的縮放,當(dāng)我們不需要這種情況時,可以選擇禁止:
html {
-webkit-text-size-adjust: 100%;
}
需要注意的是,PC端的該屬性已經(jīng)被移除,該屬性在移動端要生效,必須設(shè)置 ‘meta viewport’。
15. 移動端如何清除輸入框內(nèi)陰影
在iOS上,輸入框默認(rèn)有內(nèi)部陰影,但無法使用 box-shadow 來清除,如果不需要陰影,可以這樣關(guān)閉:
input,
textarea {
border: 0;
-webkit-appearance: none;
}
16. 快速回彈滾動
我們先來看看回彈滾動在手機瀏覽器發(fā)展的歷史:
早期的時候,移動端的瀏覽器都不支持非body元素的滾動條,所以一般都借助 iScroll;
Android 3.0/iOS解決了非body元素的滾動問題,但滾動條不可見,同時iOS上只能通過2個手指進行滾動;
Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果,不過隨后這個特性又被移除;
iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果
在iOS上如果你想讓一個元素?fù)碛邢?Native 的滾動效果,你可以這樣做:
.xxx {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
PS:iScroll用過之后感覺不是很好,有一些詭異的bug,這里推薦另外一個 iDangero Swiper,這個插件集成了滑屏滾動的強大功能(支持3D),而且還有回彈滾動的內(nèi)置滾動條,官方地址:
iDangero
17. 移動端禁止選中內(nèi)容
如果你不想用戶可以選中頁面中的內(nèi)容,那么你可以在css中禁掉:
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
18. 移動端取消touch高亮效果
在做移動端頁面時,會發(fā)現(xiàn)所有a標(biāo)簽在觸發(fā)點擊時或者所有設(shè)置了偽類 :active 的元素,默認(rèn)都會在激活狀態(tài)時,顯示高亮框,如果不想要這個高亮,那么你可以通過css以下方法來進行全局的禁止:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但這個方法在三星的機子上無效,有一種妥協(xié)的方法是把頁面非真實跳轉(zhuǎn)鏈接的a標(biāo)簽換成其它標(biāo)簽,可以解決這個問題。
19. 如何禁止保存或拷貝圖像(IOS)
通常當(dāng)你在手機或者pad上長按圖像 img ,會彈出選項 存儲圖像 或者 拷貝圖像,如果你不想讓用戶這么操作,那么你可以通過以下方法來禁止:
img { -webkit-touch-callout: none; }
20.模擬按鈕hover效果
移動端觸摸按鈕的效果,可明示用戶有些事情正要發(fā)生,是一個比較好體驗,但是移動設(shè)備中并沒有鼠標(biāo)指針,使用css的hover并不能滿足我們的需求,還好國外有個激活css的active效果,代碼如下,
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
<div class="btn-blue">按鈕</div>
<script type="text/javascript">
document.addEventListener("touchstart", function{}, true)
</script>
兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的辦法,可通過綁定ontouchstart和ontouchend來控制按鈕的類名
.btn-blue-on{background-color: #357AE8;}
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function{
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function{
this.className = "btn-blue"
21.屏幕旋轉(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) {
22.audio元素和video元素在ios和andriod中無法自動播放
應(yīng)對方案:觸屏即播
$('html').one('touchstart',function{
audio.play
})
23.搖一搖功能
HTML5 deviceMotion:封裝了運動傳感器數(shù)據(jù)的事件,可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。
24.手機拍照和上傳圖片
<input type="file">的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">
使用總結(jié):
ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認(rèn)外觀丑陋
25. 消除transition閃屏
.css{
-webkit-transform-style: preserve-3d;
-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);
}
設(shè)計高性能CSS3動畫的幾個要素
盡可能地使用合成屬性transform和opacity來設(shè)計CSS3動畫,
不使用position的left和top來定位
利用translate3D開啟GPU加速
26. android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
框架
1. 移動端基礎(chǔ)框架
zepto.js 語法與jquery幾乎一樣,會jquery基本會zepto~
iscroll.js 解決頁面不支持彈性滾動,不支持fixed引起的問題~ 實現(xiàn)下拉刷新,滑屏,縮放等功能~
underscore.js 該庫提供了一整套函數(shù)式編程的實用功能,但是沒有擴展任何JavaScript內(nèi)置對象。
fastclick 加快移動端點擊響應(yīng)時間
animate.css CSS3動畫效果庫
2. 滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
3.瀑布流框架
masonry
工具推薦
caniuse 各瀏覽器支持html5屬性查詢
paletton 調(diào)色搭配
干貨!免費領(lǐng)取騰訊高級講師網(wǎng)頁設(shè)計教程
點我領(lǐng)取
???
關(guān)注網(wǎng)頁設(shè)計自學(xué)平臺,99%的努力都在這里
▼無法識別二維碼可以點「閱讀原文」噢!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。