首先咱們中會有一些經常使用的meta標籤,以下:css
<!--防止手機中網頁放大和縮小--> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> 備註:width 設置viewport寬度,爲一個正整數,或字符串‘device-width’ height 設置viewport高度,通常設置了寬度,會自動解析出高度,能夠不用設置 initial-scale 默認縮放比例,爲一個數字,能夠帶小數 minimum-scale 容許用戶最小縮放比例,爲一個數字,能夠帶小數 maximum-scale 容許用戶最大縮放比例,爲一個數字,能夠帶小數 user-scalable 是否容許手動縮放 <!--讓瀏覽器使用webkit來解析--> <meta name="renderer" content="webkit|ie-comp|ie-stand"><!--禁止ios設備將數字做爲撥號鏈接,郵箱自動發送,點擊地圖跳轉--> <meta name="format-detection" content="telephone=no,email=no,adress=no"><!--強制顯示全屏--> <meta name="full-screen" content="yes"><!--開啓對webapp的支持設置Web應用是否以全屏模式運行--> <meta name="apple-mobile-web-app-capable" content="yes"> 備註:若是content設置爲yes,Web應用會以全屏模式運行,反之,則不會。content的默認值是no,表示正常顯示。 你能夠經過只讀屬性window.navigator.standalone來肯定網頁是否以全屏模式顯示<!--webapp應用下狀態條顏色,默認值爲黑色--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 備註:除非你先使用apple-mobile-web-app-capable指定全屏模式,不然這個meta標籤不會起任何做用。 若是content設置爲default,則狀態欄正常顯示。若是設置爲blank,則狀態欄會有一個黑色的背景。 若是設置爲blank-translucent,則狀態欄顯示爲黑色半透明。若是設置爲default或blank,則頁面顯示在狀態欄的下方, 即狀態欄佔據上方部分,頁面佔據下方部分,兩者沒有遮擋對方或被遮擋。若是設置爲blank-translucent,則頁面會充滿屏幕, 其中頁面頂部會被狀態欄遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina屏幕爲40px)。默認值是default。<!--禁止瀏覽器從緩存中訪問頁面--> <meta http-equiv="pragma" content="no-cache"><!--禁止自動識別電話號碼--> <meta name="format-detection" content="telephone=no"/><!--禁止自動識別郵箱--> <meta content="email=no" name="format-detection"/><!--iphone中safari私有meta標籤,容許全屏模式瀏覽,隱藏瀏覽器導航欄--> <meta name="apple-mobile-web-app-capable" content="yes"/>
其次還有一些特殊狀況須要用到的meta標籤。可依照項目狀況而定html
<!-- 啓用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,好比黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no">
通常移動端,有人喜歡用百分比,有人喜歡用rem,有人喜歡用em,我我的比較喜歡百分比和rem(主要我懶的算= =),下面我說我我的用的rem。我是爲了徹底自適應,多以一般會拿js先控制,而後再用rem,代碼以下:android
//動態設置頁面的像素比,達到一比一還原設計稿 var iScale=1; iScale=iScale/window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,' + 'initial-scale='+iScale+',maximum-scale='+iScale+',minimum-scale='+iScale+'">'); var iWidth=document.documentElement.clientWidth; document.getElementsByTagName("html")[0].style.fontSize = iWidth/10+"px";
這樣我在項目裏,好比720的設計圖紙,h2字體大小36px,寬度400px,那麼我就會這樣寫:ios
h2{ font-size: 36/72rem; width: 400/72rem; }
以此類推,這樣就會達到不管在什麼設備上,都是1:1還原了設計圖紙。固然我也會在一些section設置width的時候,用百分比。這些依照狀況而定。web
前段時間,一個朋友說有個bug一直不知道怎麼解決,我一看,是浮動形成的,在iPhone6P、UC瀏覽器以及QQ瀏覽器上,底部固定定位的導航,右側頭部會有留白部分,好像掉下去同樣。我的有個建議,在手機上,涉及到底部固定定位的導航,儘可能使用彈性盒子flex佈局,而不是使用浮動,固然,我我的很喜愛彈性盒子,沒辦法,太懶。。。windows
項目中,咱們每每會遇到一些判斷瀏覽器的,判斷設備的,以下:api
//JS判斷設備 function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i<len,len = agent.length; i++){ if(ua.indexOf(agent[i])>0){ break; } } } //JS判斷微信瀏覽器 function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; } } deviceType(); window.addEventListener('resize', function(){ deviceType(); })
這是通常時候用的,固然還有另一種:瀏覽器
var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移動終端瀏覽器版本信息 trident: u.indexOf('Trident') > -1, //IE內核 presto: u.indexOf('Presto') > -1, //opera內核 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器 iPhone: u.indexOf('iPhone') > -1, //是否爲iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web應該程序,沒有頭部與底部 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() }if (browser.versions.mobile) {//判斷是不是移動設備打開。browser代碼在下面 var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象 if (ua.match(/MicroMessenger/i) == "micromessenger") { //在微信中打開 } if (ua.match(/WeiBo/i) == "weibo") { //在新浪微博客戶端打開 } if (ua.match(/QQ/i) == "qq") { //在QQ空間打開 } if (browser.versions.ios) { //是否在IOS瀏覽器打開 } if(browser.versions.android){ //是否在安卓瀏覽器打開 } } else { //不然就是PC瀏覽器打開 }
下面是整理的一些常見的坑和解決辦法:緩存
1:微信瀏覽器用戶調整字體大小後頁面矬了,怎麼阻止用戶調整以下:微信
//如下代碼可以使Android機頁面再也不受用戶字體縮放強制改變大小,可是會有1S左右延時,期間能夠考慮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禁止用戶調整字體大小 body { -webkit-text-size-adjust:100%!important; }//最好的解決方案:使用rem或百分比佈局
2:移動端 HTML5 input date 不支持 placeholder 問題,能夠設置以下便可解決
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
3:audio元素和video元素在ios和andriod中沒法自動播放
<!--音頻,寫法一--> <audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio> <!--音頻,寫法二--> <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"> <source src="music/bg.mp3" type="audio/mpeg"> <!--優先播放音樂bg.ogg,不支持在播放bg.mp3--> </audio> <script> //JS綁定自動播放(操做window時,播放音樂) $(window).one('touchstart', function(){ music.play(); }) //微信下兼容處理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //備註 //1.audio元素的autoplay屬性在IOS及Android上沒法使用,在PC端正常 //2.audio元素沒有設置controls時,在IOS及Android會佔據空間大小,而在PC端Chrome是不會佔據任何空間 </script>
也可用以下方法:先經過用戶 touchstart 觸碰,觸發播放並暫停(音頻開始加載,後面用 JS 再操做就沒問題了)
<script> document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); }); </script>
4:取消input在ios下,輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
5:android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
6:關於 iOS 端字體的優化(橫豎屏會出現字體加粗不一致等)
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;
html,body {-webkit-user-select:none; user-select: none; }
8:H5GPS定位,我這裏有個將GPS座標轉換成GCJ-02墨卡託座標的js代碼,能夠精確的定位到具體地理位置。有搗鼓定位的能夠試試。連接地址:http://download.csdn.NET/detail/zhaohaixin0418/9736523 具體定位問題,改天有時間給你們整理一個出來
9:某些Android手機圓角失效,代碼以下:
{background-clip: padding-box;}
10:關於 iOS 系統中,中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格
this.value = this.value.replace(/\u2006/g, '');
11:打電話發短信寫郵件怎麼實現
<!--1、打電話--> <a href="tel:0755-10086">打電話給:0755-10086</a> <!--2、發短信,winphone系統無效--> <a href="sms:10086">發短信給: 10086</a> <!--3、寫郵件 注:在添加這些功能時,第一個功能以"?"開頭,後面的以"&"開頭1.普通郵件--> <a href="mailto:979976770@qq.com">點擊我發郵件</a> <!--2.收件地址後添加?cc=開頭,可添加抄送地址(Android存在兼容問題)--> <a href="mailto:979976770@qq.com?cc=alone_haixin@163.com">點擊我發郵件</a> <!--3.跟着抄送地址後,寫上&bcc=,可添加密件抄送地址(Android存在兼容問題)--> <a href="mailto:979976770@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com">點擊我發郵件</a> <!--4.包含多個收件人、抄送、密件抄送人,用分號(;)隔開多個郵件人的地址--> <a href="mailto:979976770@qq.com;723661@qq.com">點擊我發郵件</a> <!--5.包含主題,用?subject=--> <a href="mailto:979976770@qq.com?subject=郵件主題">點擊我發郵件</a> <!--6.包含內容,用?body=;如內容包含文本,使用%0A給文本換行--> <a href="mailto:979976770@qq.com?body=郵件主題內容%0A劇情再美%0A終究是戲">點擊我發郵件</a> <!--7.內容包含連接,含http(s)://等的文本自動轉化爲連接--> <a href="mailto:979976770@qq.com?body=http://www.baidu.com">點擊我發郵件</a> <!--8.內容包含圖片(PC不支持)--> <a href="mailto:979976770@qq.com?body=<img src='images/1.jpg' />">點擊我發郵件</a> <!--9.完整示例--> <a href="mailto:979976770@qq.com;723661@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com&subject= [郵件主題]&body=劇情再美終究是戲%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">點擊我發郵件</a>
12:手機拍照和上傳圖片
<!--IOS有拍照、錄像、選取本地圖片功能,部分Android只有選擇本地圖片功能。Winphone不支持--> <input type="file" accept="images/*" /> <input type="file" accept="video/*" />
13:美化表單元素的一些css:
/*1、使用appearance改變webkit瀏覽器的默認外觀*/ input,select { -webkit-appearance:none; appearance: none; } /*2、winphone下,使用僞元素改變表單元素默認外觀1.禁用select默認箭頭,::-ms-expand修改表單控件下拉箭頭,設置隱藏並使用背景圖片來修飾*/ select::-ms-expand { display:none; } /*2.禁用radio和checkbox默認樣式,::-ms-check修改表單複選框或單選框默認圖標,設置隱藏並使用背景圖片來修飾*/ input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display:none; } /*3.禁用pc端表單輸入框默認清除按鈕,::-ms-clear修改清除按鈕,設置隱藏並使用背景圖片來修飾*/ input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display:none; }
另外給你們說一個重感力事件:
// 運用HTML5的deviceMotion,調用重力感應事件 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 ){ //這裏是搖動後要執行的方法 yaoAfter(); } lastX = x; lastY = y; lastZ = z; } function yaoAfter(){ //do something }
首先咱們中會有一些經常使用的meta標籤,以下:
<!--防止手機中網頁放大和縮小--> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> 備註:width 設置viewport寬度,爲一個正整數,或字符串‘device-width’ height 設置viewport高度,通常設置了寬度,會自動解析出高度,能夠不用設置 initial-scale 默認縮放比例,爲一個數字,能夠帶小數 minimum-scale 容許用戶最小縮放比例,爲一個數字,能夠帶小數 maximum-scale 容許用戶最大縮放比例,爲一個數字,能夠帶小數 user-scalable 是否容許手動縮放 <!--讓瀏覽器使用webkit來解析--> <meta name="renderer" content="webkit|ie-comp|ie-stand"><!--禁止ios設備將數字做爲撥號鏈接,郵箱自動發送,點擊地圖跳轉--> <meta name="format-detection" content="telephone=no,email=no,adress=no"><!--強制顯示全屏--> <meta name="full-screen" content="yes"><!--開啓對webapp的支持設置Web應用是否以全屏模式運行--> <meta name="apple-mobile-web-app-capable" content="yes"> 備註:若是content設置爲yes,Web應用會以全屏模式運行,反之,則不會。content的默認值是no,表示正常顯示。 你能夠經過只讀屬性window.navigator.standalone來肯定網頁是否以全屏模式顯示<!--webapp應用下狀態條顏色,默認值爲黑色--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 備註:除非你先使用apple-mobile-web-app-capable指定全屏模式,不然這個meta標籤不會起任何做用。 若是content設置爲default,則狀態欄正常顯示。若是設置爲blank,則狀態欄會有一個黑色的背景。 若是設置爲blank-translucent,則狀態欄顯示爲黑色半透明。若是設置爲default或blank,則頁面顯示在狀態欄的下方, 即狀態欄佔據上方部分,頁面佔據下方部分,兩者沒有遮擋對方或被遮擋。若是設置爲blank-translucent,則頁面會充滿屏幕, 其中頁面頂部會被狀態欄遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina屏幕爲40px)。默認值是default。<!--禁止瀏覽器從緩存中訪問頁面--> <meta http-equiv="pragma" content="no-cache"><!--禁止自動識別電話號碼--> <meta name="format-detection" content="telephone=no"/><!--禁止自動識別郵箱--> <meta content="email=no" name="format-detection"/><!--iphone中safari私有meta標籤,容許全屏模式瀏覽,隱藏瀏覽器導航欄--> <meta name="apple-mobile-web-app-capable" content="yes"/>
其次還有一些特殊狀況須要用到的meta標籤。可依照項目狀況而定
<!-- 啓用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,好比黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no">
通常移動端,有人喜歡用百分比,有人喜歡用rem,有人喜歡用em,我我的比較喜歡百分比和rem(主要我懶的算= =),下面我說我我的用的rem。我是爲了徹底自適應,多以一般會拿js先控制,而後再用rem,代碼以下:
//動態設置頁面的像素比,達到一比一還原設計稿 var iScale=1; iScale=iScale/window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,' + 'initial-scale='+iScale+',maximum-scale='+iScale+',minimum-scale='+iScale+'">'); var iWidth=document.documentElement.clientWidth; document.getElementsByTagName("html")[0].style.fontSize = iWidth/10+"px";
這樣我在項目裏,好比720的設計圖紙,h2字體大小36px,寬度400px,那麼我就會這樣寫:
h2{ font-size: 36/72rem; width: 400/72rem; }
以此類推,這樣就會達到不管在什麼設備上,都是1:1還原了設計圖紙。固然我也會在一些section設置width的時候,用百分比。這些依照狀況而定。
前段時間,一個朋友說有個bug一直不知道怎麼解決,我一看,是浮動形成的,在iPhone6P、UC瀏覽器以及QQ瀏覽器上,底部固定定位的導航,右側頭部會有留白部分,好像掉下去同樣。我的有個建議,在手機上,涉及到底部固定定位的導航,儘可能使用彈性盒子flex佈局,而不是使用浮動,固然,我我的很喜愛彈性盒子,沒辦法,太懶。。。
項目中,咱們每每會遇到一些判斷瀏覽器的,判斷設備的,以下:
//JS判斷設備 function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i<len,len = agent.length; i++){ if(ua.indexOf(agent[i])>0){ break; } } } //JS判斷微信瀏覽器 function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; } } deviceType(); window.addEventListener('resize', function(){ deviceType(); })
這是通常時候用的,固然還有另一種:
var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移動終端瀏覽器版本信息 trident: u.indexOf('Trident') > -1, //IE內核 presto: u.indexOf('Presto') > -1, //opera內核 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器 iPhone: u.indexOf('iPhone') > -1, //是否爲iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web應該程序,沒有頭部與底部 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() }if (browser.versions.mobile) {//判斷是不是移動設備打開。browser代碼在下面 var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象 if (ua.match(/MicroMessenger/i) == "micromessenger") { //在微信中打開 } if (ua.match(/WeiBo/i) == "weibo") { //在新浪微博客戶端打開 } if (ua.match(/QQ/i) == "qq") { //在QQ空間打開 } if (browser.versions.ios) { //是否在IOS瀏覽器打開 } if(browser.versions.android){ //是否在安卓瀏覽器打開 } } else { //不然就是PC瀏覽器打開 }
下面是整理的一些常見的坑和解決辦法:
1:微信瀏覽器用戶調整字體大小後頁面矬了,怎麼阻止用戶調整以下:
//如下代碼可以使Android機頁面再也不受用戶字體縮放強制改變大小,可是會有1S左右延時,期間能夠考慮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禁止用戶調整字體大小 body { -webkit-text-size-adjust:100%!important; }//最好的解決方案:使用rem或百分比佈局
2:移動端 HTML5 input date 不支持 placeholder 問題,能夠設置以下便可解決
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
3:audio元素和video元素在ios和andriod中沒法自動播放
<!--音頻,寫法一--> <audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio> <!--音頻,寫法二--> <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"> <source src="music/bg.mp3" type="audio/mpeg"> <!--優先播放音樂bg.ogg,不支持在播放bg.mp3--> </audio> <script> //JS綁定自動播放(操做window時,播放音樂) $(window).one('touchstart', function(){ music.play(); }) //微信下兼容處理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //備註 //1.audio元素的autoplay屬性在IOS及Android上沒法使用,在PC端正常 //2.audio元素沒有設置controls時,在IOS及Android會佔據空間大小,而在PC端Chrome是不會佔據任何空間 </script>
也可用以下方法:先經過用戶 touchstart 觸碰,觸發播放並暫停(音頻開始加載,後面用 JS 再操做就沒問題了)
<script> document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); }); </script>
4:取消input在ios下,輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
5:android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
6:關於 iOS 端字體的優化(橫豎屏會出現字體加粗不一致等)
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;
html,body {-webkit-user-select:none; user-select: none; }
8:H5GPS定位,我這裏有個將GPS座標轉換成GCJ-02墨卡託座標的js代碼,能夠精確的定位到具體地理位置。有搗鼓定位的能夠試試。連接地址:http://download.csdn.NET/detail/zhaohaixin0418/9736523 具體定位問題,改天有時間給你們整理一個出來
9:某些Android手機圓角失效,代碼以下:
{background-clip: padding-box;}
10:關於 iOS 系統中,中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格
this.value = this.value.replace(/\u2006/g, '');
11:打電話發短信寫郵件怎麼實現
<!--1、打電話--> <a href="tel:0755-10086">打電話給:0755-10086</a> <!--2、發短信,winphone系統無效--> <a href="sms:10086">發短信給: 10086</a> <!--3、寫郵件 注:在添加這些功能時,第一個功能以"?"開頭,後面的以"&"開頭1.普通郵件--> <a href="mailto:979976770@qq.com">點擊我發郵件</a> <!--2.收件地址後添加?cc=開頭,可添加抄送地址(Android存在兼容問題)--> <a href="mailto:979976770@qq.com?cc=alone_haixin@163.com">點擊我發郵件</a> <!--3.跟着抄送地址後,寫上&bcc=,可添加密件抄送地址(Android存在兼容問題)--> <a href="mailto:979976770@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com">點擊我發郵件</a> <!--4.包含多個收件人、抄送、密件抄送人,用分號(;)隔開多個郵件人的地址--> <a href="mailto:979976770@qq.com;723661@qq.com">點擊我發郵件</a> <!--5.包含主題,用?subject=--> <a href="mailto:979976770@qq.com?subject=郵件主題">點擊我發郵件</a> <!--6.包含內容,用?body=;如內容包含文本,使用%0A給文本換行--> <a href="mailto:979976770@qq.com?body=郵件主題內容%0A劇情再美%0A終究是戲">點擊我發郵件</a> <!--7.內容包含連接,含http(s)://等的文本自動轉化爲連接--> <a href="mailto:979976770@qq.com?body=http://www.baidu.com">點擊我發郵件</a> <!--8.內容包含圖片(PC不支持)--> <a href="mailto:979976770@qq.com?body=<img src='images/1.jpg' />">點擊我發郵件</a> <!--9.完整示例--> <a href="mailto:979976770@qq.com;723661@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com&subject= [郵件主題]&body=劇情再美終究是戲%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">點擊我發郵件</a>
12:手機拍照和上傳圖片
<!--IOS有拍照、錄像、選取本地圖片功能,部分Android只有選擇本地圖片功能。Winphone不支持--> <input type="file" accept="images/*" /> <input type="file" accept="video/*" />
13:美化表單元素的一些css:
/*1、使用appearance改變webkit瀏覽器的默認外觀*/ input,select { -webkit-appearance:none; appearance: none; } /*2、winphone下,使用僞元素改變表單元素默認外觀1.禁用select默認箭頭,::-ms-expand修改表單控件下拉箭頭,設置隱藏並使用背景圖片來修飾*/ select::-ms-expand { display:none; } /*2.禁用radio和checkbox默認樣式,::-ms-check修改表單複選框或單選框默認圖標,設置隱藏並使用背景圖片來修飾*/ input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display:none; } /*3.禁用pc端表單輸入框默認清除按鈕,::-ms-clear修改清除按鈕,設置隱藏並使用背景圖片來修飾*/ input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display:none; }
另外給你們說一個重感力事件:
// 運用HTML5的deviceMotion,調用重力感應事件 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 ){ //這裏是搖動後要執行的方法 yaoAfter(); } lastX = x; lastY = y; lastZ = z; } function yaoAfter(){ //do something }