移動端問題列表及解決方案（轉）

1、css相關

一、去掉點擊連接和文本框對象時默認的灰色半透明覆蓋層(iOS)或者虛框(Android)。

解決方案：
html,body{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

二、iphone手機Safari瀏覽器裏面的廣告圖自動消失

緣由：有的瀏覽器對廣告有屏蔽功能
解決方案：不要把廣告圖命名成ad，也不要把css選擇器命名成ad

頁面可以解析出來展現的DOM，命名不要用ad，好比選擇器命名，圖片命名，若是瀏覽器安裝了ABP廣告攔截插件，會出現閃屏現象。

三、font-size<12px時，中文版chrome瀏覽器裏字體顯示仍爲12px，禁止文字自動調整大小。

解決方案：
html{
-webkit-text-size-adjust:none;
}

四、禁止頁面文字選擇

解決方案：
body{
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all （移動端不須要） */
-ms-user-select: none;      /* IE 10+ */      
}

五、局部滾動(僅iOS 5以上支持)

解決方案：
body{
  -webkit-overflow-scrolling:touch;
}

六、css實現標籤頁的切換效果

利用錨點結合CSS3的target僞類便可。

七、css實現硬件加速

animations，transforms以及transitions不會自動開啓GPU加速，而是由瀏覽器的渲染引擎來執行，能夠用transform: translateZ(0)或transform: translate3d(0, 0, 0)開啓硬件加速，解決頁面閃白，保證動畫流暢。

.jiasu {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

八、取消ie瀏覽器下點擊a標籤時出現虛線

解決方案：
a{
outline：none;
}

九、禁用長按頁面時的彈出菜單(iOS下有效)

解決方案：
a,img{
-webkit-touch-callout:none; 
}

十、QQ瀏覽器中的a標籤訪問後變灰

解決方案：給color加！Important。

十一、被點擊訪問過的超連接再也不具備hover和active效果了
解決方法，改變css屬性的排列順序

a:link {} a:visited {} a:hover {} a:active {}

十二、多行截斷webkit-line-clamp樣式在a標籤中表現詭異

問題：省略號出現先文本中間，而沒有定期望出如今末尾。
解決方案：在a標籤中寫新標籤，好比p，用p包裹文字塊。

1三、iPhone5s中的ios10系統的safari瀏覽器上，頁面文本框的光標跳到左上角。

問題分析：移動端web頁面的文本框用line-height屬性來作垂直居中對齊。
解決方案：移動端web頁面的文本框不要用line-height屬性作垂直居中對齊，建議用line-height:normal配合padding來達到輸入區域的文字對齊。

1四、移動端1px邊框實現

1五、最好不要用實體字體，不一樣系統不一樣瀏覽器對實體字體大小解析不一樣，好比在Windows上正常的菱形字體，在MAC上面字體特別大，這個問題好可愛，仍是用圖片靠譜些。

1六、使頁面上的字體抗鋸齒，看起來更清晰。

body{
    -webkit-font-smoothing: antialiased; 
}

1七、flexbox的問題

問題描述：IE10~11瀏覽器，不識別flex容器的子元素flex項目的min-height屬性。
解決方案：用height替代min-height。

問題描述：Chrome，Opera和Safari瀏覽器，不識別flex項目內容的最小尺寸。
解決方案：能夠設置flex-shrink的值爲0（而不是默認的1），以免沒必要要的收縮。

問題描述：IE10~11瀏覽器，會忽略flex簡寫。
解決方案：不要使用無單位的flex-basis值，常使用0%來替代0px。

問題描述：安卓手機的UC瀏覽器不支持flex。
解決方案：flexbox佈局方案由W3C於2009年提出，UC瀏覽器支持老版本的彈性盒子，能夠經過漸進加強來解決兼容性問題。
.flexbox{
  display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本語法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本語法: IE 10 */
  display: -webkit-flex; /* 新版本語法: Chrome 21+ */
  display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}

問題描述：子元素根據內容大小自適應寬度，沒有等分。
解決方案：設置width:0%;。

2、js相關

一、沒法解決

安卓機部分瀏覽器沒法直播分機號

iphone手機的safari瀏覽器中，撥打電話，出現系統異常彈框

二、能夠解決

微信瀏覽器返回上一頁，頁面被刷新

iphone手機瀏覽器文本框不觸發輸入中文的keyup事件

iphone手機的safari瀏覽器的無痕模式下，localStorage不起做用

iphone手機的safari瀏覽器中，點擊事件失效

移動端click事件300ms延遲

tap穿透之zepto的bug

識別拖動與點擊操做之zepto的bug

zepto中的scrollTo

軟鍵盤被喚醒後，頁面元素被遮擋

fixed定位文本框引起的問題

頁面露底

控制點擊頻率

 

轉載自： https://www.cnblogs.com/camille666/p/mobile_browser_compatible.html