一、css相关
1、去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)。
解决方案：
html,body{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
2、iphone手机Safari浏览器里面的广告图自动消失
原因：有的浏览器对广告有屏蔽功能 解决方案：不要把广告图命名成ad，也不要把css选择器命名成ad
页面能够解析出来展示的DOM，命名不要用ad，比如选择器命名，图片命名，如果浏览器安装了ABP广告拦截插件，会出现闪屏现象。
3、font-size<12px时，中文版chrome浏览器里字体显示仍为12px，禁止文字自动调整大小。
解决方案：
html{
-webkit-text-size-adjust:none;
}
4、禁止页面文字选择
解决方案：
body{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
5、局部滚动(仅iOS 5以上支持)
解决方案：
body{
-webkit-overflow-scrolling:touch;
}
6、css实现标签页的切换效果
利用锚点结合CSS3的target伪类即可。
7、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);
}
8、取消ie浏览器下点击a标签时出现虚线
解决方案：
a{
outline：none;
}
9、禁用长按页面时的弹出菜单(iOS下有效)
解决方案：
a,img{
-webkit-touch-callout:none;
}
10、QQ浏览器中的a标签访问后变灰
解决方案：给color加！Important。
11、被点击访问过的超链接不再具有hover和active效果了
解决方法，改变css属性的排列顺序
a:link {} a:visited {} a:hover {} a:active {}
12、多行截断webkit-line-clamp样式在a标签中表现诡异
问题：省略号出现先文本中间，而没有按期望出现在末尾。 解决方案：在a标签中写新标签，比如p，用p包裹文字块。
13、iPhone5s中的ios10系统的safari浏览器上，页面文本框的光标跳到左上角。
问题分析：移动端web页面的文本框用line-height属性来做垂直居中对齐。 解决方案：移动端web页面的文本框不要用line-height属性做垂直居中对齐，建议用line-height:normal配合padding来达到输入区域的文字对齐。
14、移动端1px边框实现
15、最好不要用实体字体，不同系统不同浏览器对实体字体大小解析不同，比如在Windows上正常的菱形字体，在MAC上面字体特别大，这个问题好可爱，还是用图片靠谱些。
16、使页面上的字体抗锯齿，看起来更清晰。
body{
-webkit-font-smoothing: antialiased;
}
17、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+ */
}
问题描述：子元素根据内容大小自适应宽度，没有等分。 解决方案：设置0%;。
二、js相关
1、无法解决
iphone手机的safari浏览器中，拨打电话，出现系统异常弹框
2、可以解决
iphone手机的safari浏览器的无痕模式下，localStorage不起作用
转载自： https://www.cnblogs.com/camille666/p/mobile_browser_compatible.html