html5重力感應(yīng)效果-搖一搖

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）

2. 啟用 WebApp 全屏模式（IOS）

當(dāng)網(wǎng)站添加到主屏幕后再點擊進行啟動時，可隱藏地址欄（從瀏覽器跳轉(zhuǎn)或輸入鏈接進入并沒有此效果）

3. 百度禁止轉(zhuǎn)碼

通過百度手機打開網(wǎng)頁時，百度可能會對你的網(wǎng)頁進行轉(zhuǎn)碼，往你頁面貼上它的廣告，非常之惡心。不過我們可以通過這個meta標(biāo)簽來禁止它：

百度SiteApp轉(zhuǎn)碼聲明

4. 設(shè)置狀態(tài)欄的背景顏色（IOS）

設(shè)置狀態(tài)欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

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)閉電話號碼的自動識別：

開啟電話功能

開啟短信功能：

6. 移動端郵箱識別（Android）

與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：

同樣地，我們也可以通過標(biāo)簽屬性來開啟長按郵箱地址彈出郵件發(fā)送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

8. IOS Web app啟動動畫

由于iPad 的啟動畫面是不包括狀態(tài)欄區(qū)域的。所以啟動圖片需要減去狀態(tài)欄區(qū)域所對應(yīng)的方向上的20px大小，相應(yīng)地在retina設(shè)備上要減去40px的大小

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏后的APP圖標(biāo)

指定web app添加到主屏后的圖標(biāo)路徑，有兩種略微不同的方式：

* 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

11.viewport模板

<!DOCTYPE html>

<html>

<head>

</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)生的半透明灰色背景怎么去掉

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)情況下鍵盤是開啟首字母大寫的功能的，如果啟用這個功能，可以這樣：

13. 關(guān)閉iOS輸入自動修正

和英文輸入默認(rèn)自動首字母大寫那樣，IOS還做了一個功能，默認(rèn)輸入法會開啟自動修正輸入內(nèi)容，這樣的話，用戶經(jīng)常要操作兩次。如果不希望開啟此功能，我們可以通過input標(biāo)簽屬性來關(guān)閉掉：

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效果，代碼如下，

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>

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 屬性

使用總結(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%的努力都在這里

▼無法識別二維碼可以點「閱讀原文」噢！

在線咨詢

上一篇：jQuery css() 方法
下一篇：瀏覽器工作原理

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html5重力感應(yīng)效果-搖一搖

您的項目需求