整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          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é)果信息。

          1. <div id="hand" class="hand hand-animate"></div>

          2. <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。

          1. <script src="shake.js"></script>

          復(fù)制代碼

          首先實例化Shake,然后啟動開始監(jiān)聽設(shè)備運動情況,監(jiān)聽設(shè)備運動,回調(diào)監(jiān)聽結(jié)果:shakeEventDidOccur。

          1. window.onload = function() {

          2. var myShakeEvent = new Shake({

          3. threshold: 15

          4. });

          5. myShakeEvent.start();

          6. window.addEventListener('shake', shakeEventDidOccur, false);

          7. function shakeEventDidOccur () {

          8. var result = document.getElementById("result");

          9. result.className = "result";

          10. var arr = ['妹子一枚','福利圖片一套','碼農(nóng)筆記一本','土豪金一臺'];

          11. var num = Math.floor(Math.random()*4);

          12. result.innerHTML = "恭喜,搖得"+arr[num]+"!";

          13. setTimeout(function(){

          14. result.className = "result result-show";

          15. }, 1000);

          16. }

          17. };

          18. 這里,函數(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)不同的驚喜。

          如果識別出來,微信會自動進入正在電視臺互動的頁面,比如我們可以同意登陸進行互動。如果識別失敗了,或者電視臺這時沒有互動的話,微信也會提示我們的。

          信IDWEB_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%的努力都在這里

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


          上一篇:jQuery css() 方法
          下一篇:瀏覽器工作原理
          主站蜘蛛池模板: 久久精品一区二区三区中文字幕| 国产丝袜一区二区三区在线观看 | 色精品一区二区三区| 国产精品区AV一区二区| 日韩视频一区二区在线观看| 在线观看亚洲一区二区| 久久久91精品国产一区二区三区 | 日本精品夜色视频一区二区| 亚洲一区二区影视| 无码aⅴ精品一区二区三区浪潮| 精品一区二区三区四区在线| 一区二区三区波多野结衣| 国产拳头交一区二区| 在线视频一区二区三区四区| 蜜芽亚洲av无码一区二区三区| 少妇激情一区二区三区视频 | 在线视频一区二区| 日韩好片一区二区在线看| 无码人妻久久一区二区三区免费 | 亚洲一区免费视频| 亚洲一区二区三区丝袜| 亚洲熟妇无码一区二区三区| 精品动漫一区二区无遮挡| 国产成人精品第一区二区| 亚洲sm另类一区二区三区| 手机福利视频一区二区| 国产一区在线视频观看| 精品中文字幕一区二区三区四区| 国产日韩精品一区二区在线观看播放 | 日韩精品一区二区三区视频| 日本一区二区在线不卡| 精品国产AⅤ一区二区三区4区| 久久久久久一区国产精品| av无码人妻一区二区三区牛牛 | 国产亚洲3p无码一区二区| 久久精品国产一区| 国产精品久久一区二区三区| 日韩欧美一区二区三区免费观看| 国产成人综合亚洲一区| 久久国产精品免费一区二区三区 | 精品免费AV一区二区三区|