整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML5改變了使用標記語言設計和構建網站的方式，使網站變得更加互動和智能。移動網站受益于這項令人敬畏的技術。事實上，智能手機用戶享受著與臺式機/筆記本電腦用戶相同的瀏覽體驗。
在當今世界，人們對移動web和應用程序開發有著巨大的熱情，這是因為用戶群正在以驚人的速度增長。
事實上，基于手機的互聯網使用已經蓋過傳統的臺式機/筆記本電腦瀏覽，HTML5已經成為移動開發競賽中的領跑者。
讓我們仔細看看這種標記語言對移動開發有用的一些原因。
l HLML5幫助開發人員生成更清晰和一致的代碼，他們默認跨多個平臺使用HTML5。這意味著相同的代碼適用于iPhone、Android、BlackBerry、Windows Phone等平臺。因此，它節省了開發成本，并幫助企業瞄準了龐大的客戶群。
l HTML5允許開發者創建高度響應的網站。它還可以檢測已經瀏覽過的設備，并根據瀏覽器、屏幕分辨率和屏幕尺寸呈現網站的版本。因此，所有用戶都能獲得良好的瀏覽體驗，無論他們使用何種設備瀏覽網站。
l 除了HTML5，開發人員還利用了CSS3樣式。基于CSS3的動畫減小了應用程序的大小，從而提高了應用程序的速度，并減少了移動處理器的負載，從而提高設備的整體性能。
l 借助對地理定位服務的支持，這項技術將web開發帶到了一個新的高度。這基本上是跟蹤用戶的位置，并根據位置提供解決方案。例如，如果你正在尋找一個加油站，搜索結果會提供你附近的加油站。
l 在當今時代，現代網站對音頻和視頻組件的需求和使用非常大。使用HTML5，你可以僅通過本機代碼輕松集成豐富的音頻和視頻媒體。你不必使用閃光燈或銀光在移動網站上播放視頻。
l 它從使用瀏覽器的輸入類型發展而來。這可以處理更多的信息，允許用戶瀏覽更多的內容。此外，下載JavaScript代碼花費的時間更少，它還減少了到服務器的往返次數，這樣，你可以在表單發布之前實現驗證。
使用HTML5進行移動開發需要開發人員具備高水平的技能和專業知識，這將幫助你獲得完美的移動網站，兼容所有移動瀏覽器和智能手機平臺。
如標題所說，這篇文章就是來告訴大家怎么去解決這個三個問題。
答案是使用JavaScript 中的navigator 對象。
這個對象可以做很多事情
var isAndroid = /Android/i.test(navigator.userAgent);
var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
var isMobile = /mobi/i.test(navigator.userAgent.toLowerCase());
console.log(isAndroid);
console.log(isIOS);
console.log(isMobile);
navigator.onLine // true
首先判斷瀏覽器是否支持
var supportsVibrate = "vibrate" in navigator;
if(supportsVibrate){
// 振動1秒
navigator.vibrate(1000);
} else {
console.log('不支持震動');
}
震動多次還可以傳數組
// 參數分別是震動3秒，等待2秒，然后振動1秒
navigator.vibrate([3000, 2000, 1000]);
如果想停止震動，你只需要向navigator.vibrate方法里傳入0，或一個空數組：
navigator.vibrate(0);navigator.vibrate([]);
navigator.geolocation.getCurrentPosition(); 在pc端使用誤差挺大的。手機上測試經度還是不錯的，當然還可以通過配置enableHighAcuracy設置為高經度模式，默認為false。
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
enableHighAcuracy: true,
timeout: 5000,
maximumAge: 3000 });
具體使用方法可以參見w3cshool中HTML5 地理定位 章節，用法還是很簡單的。
友A：
我來說一個所遇到的詭異的坑。嚴格地講不算是坑，但是比坑更坑100倍，因為你一旦遇到了，壓根就沒轍。
事情是這樣的，公司有一個H5開發的游戲。開發、測試、運營一切正常。不久聯運了，聯運在合作方的平臺上。誰想一上平臺就不對了，具體的問題是完全找不出問題！在我們的服務器上一切工作正常，但是到合作方的服務上，在手機里怎么刷新就是不工作。由于生產版本是混淆并壓縮的，所以在手機上調試及其痛苦。折騰了好幾天一直還是黑屏。簡直見了鬼了。老大做了好幾年游戲，他說以前用主機托管的時代，開服都要給機器燒了香再送去機房。現在這個云服務器年代，沒法給云服務器燒香開光啊，咋整？！
沒法整，為了收入只能硬著頭皮繼續查。
終于一天，調試的小弟在safari 的遠程console里面發現有一個js文件404了。但是這個js文件在CDN上存在的好好的，查了和刷了CDN節點，單獨訪問這個JS文件一切正常。 這個JS文件在我們自己的生產版本中也工作一起正常。就是在合作方的渠道里，用手機打開就404了。 把 404 具體錯誤信息 dump 下來，發給CDN供應商核對。CDN那里反饋挺快的，答：那個IP不是他們服務器！
見了鬼了！
把js文件改名，問題依舊，見了大鬼了。
又折騰了一天，實在沒轍了。死馬當活馬醫，把JS 嵌到頁面里，工作正常了。 然后反查那個404的 ip，發現對應托管網站是廣告聯盟。 但是我們壓根沒在游戲里面查廣告啊。
實在摸不著頭腦，問了各路朋友。有一個做PC頁游的老大哥一語道破天機：
他說：“誰叫你們運營域名的名字里帶 game 的。 被電信劫持了。”
合作方的運營域名命中電信的劫持條件，我們的程序js文件被重定向到電信廣告系統下的一個服務器上去。那個服務器在回吐這個js文件內容之前，會插一堆廣告js代碼到頁面中。由于我們的游戲是用了一個 z-index:9999 的 canvas 繪制的。所以之前電信插入的廣告被擋住了，誰也沒發現。 直到那個廣告服務壞掉的那天，頁面就拉不出來了。
不要臉的電信！！！！
從此之后，我們所有的 js 文件全部改后綴名叫 css, 改 mimetype 叫 text/plain。
網友B：
說一下我遇到的吧：
1、最痛恨的是紅米手機，ua返回iphone，需要結合platform判斷，但是還不準確，導致需要ios和android區別對待的時候就坑了。
2、是fixed的問題。這個解決辦法是盡量不要用，不過ios7及以下才會出現這個問題。某些情況下紅米也會有這個問題。（最近剛剛遇到，已經被坑掛了）。
3、如果你想要使用css3的動畫，那么一定要變著方式使用3d gpu加速的方式，不要試著left，height，width這樣的元素進行變換了，android4.4以下版本卡死你。
4、ios全線點擊會有300毫秒延遲，使用fastclick解決。這個插件最良心了。
5、web app像素眼設計會糾結你1px邊框問題。
6、qq瀏覽，uc瀏覽以及ios的瀏覽器，滾動時不會觸發scroll事件，但會觸發touchmove。當停止滾動后會出發scroll。
7、滾動有iscroll插件，但是還是使用原生的比較好。
8、meta功能要用好，禁止縮放，縮放比例，屏蔽電話號碼等功能很實用。（手機回答就不列舉了）。
9、如果想要像手機淘寶那樣的各個平臺看起來展示效果一致，那么就使用rem來做單位。
10、-webkit-tap-highlight-color可以取消點擊高亮。
11、localStorage在瀏覽器開啟無痕模式下ios會拋異常，導致js中斷。
12、一些情況下對非可點擊元素監聽click事件，ios下不會觸發，css增加cursor:pointer就搞定了。當然想要干脆靜止點擊就是not-allowed。
13、android4.4以下版本，設置圓角屬性需要在直接元素上，向父元素設置圓角并且指定overflow:hidden是不會生效的。
在做 iOS 和 Android 的 HTML5 開發時，你都掉到過哪些坑里呢？歡迎分享。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
