最近公司做了一個出行日記的項目，里面的頁面十多頁，天天加班，做到吐血。總體來說，寫頁面的時候雖然是十多個頁面，其實難度還是在每個頁面的特效上。公司是易到用車，出行日記的頁面在APP里有生成入口，有興趣的同學可以去看看。

其實在寫頁面的過程中，并沒有太多項目，可以直接按照設計圖給的比例來進行開發，因為我們引用了一個縮放的js,然后分屏使用的是fullpage，因此可以不去考慮尺寸的問題了。頁面里面用了大量的css3,主要是用來做一些特效，移動端對css3的屬性兼容性基本無差，主要的兼容問題還在android和IOS的渲染模式。

比如說首頁有個圓形的用戶頭像，一開始的實現方法是直接給img,width,height,border,border-radius,這樣寫在IOS中是沒問題的，效果如同我們UED給的設計圖

但是在android中就不行了，外面的邊框仍然是圓的，但是里面的圖片卻是一個矩形。之后改成了在img外面套一個div，然后把width,height,border,border-radius給了外面的這個父容器，然后里面的頭像圖片樣式改成height:100%;width:100%;border-radius: 50%,android和IOS就都乖乖好了，但是為什么在android中會出現這個問題到現在我也還沒明白==、

2.去掉電話號碼的默認樣式

h5開發中，如果頁面中包含電話號碼，電話號碼會被自動賦予樣式，顏色變成藍色還是紫色什么的。。。這個時候在head里面加一個

<meta name="format-detection" content="telephone=no"> <!--自動檢測在網頁中可能出現的電話號碼-->

就藥到病除了撒~

3.判斷當前為微信環境

通過userAgent來判斷,使用了jQuery

<script>$(function(){var ua = navigator.userAgent.toLowerCase();var u = navigator.userAgent;var matchmicro = ua.match('micromessenger');//如果符合返回micromessenger,如果不符合則返回nullvar matchandroid = u.indexOf('Android') > -1;//判斷終端為androidvar matchios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//判斷終端為iosif(matchandroid || matchios ){//function(){}}else if( matchmicro[0] == 'micromessenger' ){//判斷終端為微信//function() {}}else {return false;}}); </script>

　　4.判斷屏幕當前是否為豎屏，橫屏提醒旋轉

function orientationChange() {//當頁面的寬大于高時提示if(screen.width > screen.height) {alert("為保證最佳品質的呈現，請保持豎屏瀏覽哦~");} //下方是不同旋轉角度，可不用/*switch (window.orientation) {case 0:alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);break;case -90:alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);break;case 90:alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);break;case 180:alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);break;};*/ } // 添加事件監聽 addEventListener('load', function(){orientationChange();window.onorientationchange = orientationChange; });

　由于頁面在橫屏下顯示效果有些欠缺，故有此需求；但實際上通過在head中設置meta標簽

<meta name="screen-orientation" content="portrait" />

可以達到強制豎屏，無法旋轉屏幕的效果

?

5.css3中的calc

這個屬性也是在看鵝廠的一個充費頁面的時候看到的，一開始還以為是用了less,sass之類，一查才知道原來是css3的新屬性，頓感自己知道的太少了，詳細的介紹可以戳

http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 我在這里不做擴展說明，簡單來說可以進行運算，比如說我們想讓一個元素寬度橫霸全屏，但是兩邊需要有個間距居中，大部分時候我們要設置個margin、padding之類的，用這個就可以輕松達到了width:calc(100% - 70px);這只是一個小例子，更多的應用大家可以自己發現；另外使用的時候記得加瀏覽器廠商前綴，為了考慮兼容性可以設置一個width作為默認值。

?6.電話可撥打，郵件可發送

<a href="tel:110">點擊打電話</a>

<a href="mailto:110@qq.com">點擊發郵件</a>

?7.模擬a標簽的hover效果，使用了zepto

<script>$(function(){var links = $('a');for(var i = 0;i < links.length;i++) {links[i].addEventListener('touchstart',function(){this.addClass('hover');},false);links[i].addEventListener('touchend',function(){this.removeClass('hover');},false);}}); </script>

親測有效，主要是用了touchstart事件,然后為元素添加class，比較靈活，用途很廣泛，大家可以自己去挖掘

先寫這么多，之后再補充~

轉載于:https://www.cnblogs.com/dujingjie/p/4555291.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的H5开发中的问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。