1. ios input button背景色不起作用的
解決辦法：

input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } background改成background-color

2. H5點擊事件時會有閃頻效果
解決辦法：給html 或者body加上·如下代碼

{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

3. ios元素盒子下邊框不顯示

ios個別機型，元素設置的下邊框被遮擋或未顯示。

解決方法：

給盒子父元素添加高度撐起來。

4. 移動端如何定義字體font-family

@ 宋體 SimSun @ 黑體 SimHei @ 微信雅黑 Microsoft Yahei @ 微軟正黑體 Microsoft JhengHei @ 新宋體 NSimSun @ 新細明體 MingLiU @ 細明體 MingLiU @ 標楷體 DFKai-SB @ 仿宋 FangSong @ 楷體 KaiTi @ 仿宋_GB2312 FangSong_GB2312 @ 楷體_GB2312 KaiTi_GB2312

5. 取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

6. 屏幕旋轉的事件和樣式

//JS處理 function orientInit(){var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';if(orientChk =='lapdscape'){//這里是橫屏下需要執行的事件}else{//這里是豎屏下需要執行的事件} }orientInit(); window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){setTimeout(orientInit, 100); },false) //CSS處理 //豎屏時樣式 @media all and (orientation:portrait){ } //橫屏時樣式 @media all and (orientation:landscape){ }

7. 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><source src="music/bg.mp3" type="audio/mpeg"></source>優先播放音樂bg.ogg，不支持在播放bg.mp3 </audio>//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是不會占據任何空間

8. 旋轉屏幕時，字體大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }

9. 圓角bug
某些Android手機圓角失效

background-clip: padding-box;

10. 頂部狀態欄背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

11. html5調用安卓或者ios的撥號功能

html5提供了自動調用撥號的標簽，只要在a標簽的href中添加tel:就可以了。 如下：<a href="tel:10010">10010</a>

總結

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

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