ios和android 手机各大浏览器适配问题总结

问题&解决方案

1.禁止 iOS 弹出各种操作窗口

body, html {

-webkit-touch-callout:none  }

2.禁止 iOS 横竖屏切换字体放大问题

body, html {      -webkit-text-size-adjust: 100%;

}

3.消除 transition 闪屏

-webkit-transform-style: preserve-3d; /设置内嵌的元素在 3D 空间如何呈现：保留 3D/

-webkit-backface-visibility: hidden; /(设置进行转换的元素的背面在面对用户时是否可见：隐藏)/

4.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉 => this.value = this.value.replace(/\u2006/g, ”);

5.禁止ios和android用户选中文字

body, html {

-webkit-user-select:none

}

6.在ios和andriod中,audio元素和video元素无法自动播放

触发事件调用 => audio.play() 或 video.play()

7.CSS动画页面闪白,动画卡顿

1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位

2.开启硬件加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

8.ios和android下触摸元素时出现半透明灰色遮罩

Element {     -webkit-tap-highlight-color:rgba(255,255,255,0)   }   设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

9.圆角bug

某些Android手机圆角失效 解决方案=> background-clip: padding-box;

10.手机端js兼容写法

例1=> 设置样式 不兼容写法:document.getElementById(‘div’).style=”height:100px”

兼容写法:document.getElementById(‘div’).setAttribute(‘style’,’height:100px’)

例2=> const arr=[1,2,3]

循环不兼容写法:arr.forEach((item)=>{console.log(item)})

兼容写法:for(let i = 0,len = arr.length;i < len;i++){console.log(arr[i])}

11.IOS safari浏览器横竖屏切换后  布局不能撑满问题(竖屏切换为横屏默认全屏,横屏在切换为竖屏safari默认底部栏消失,然后点击出现竖屏布局不能再次撑满)

在body下第一个dom节点使用fixed布局 =>

.firstElement{

position: fixed;        top: 0;        bottom: 0;        left: 0;        right: 0;        width: 100%;        height: 100%;        overflow: hidden;

}

温馨提示 =>ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位 android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 ios4下不支持position:fixed 解决方案： 可用iScroll插件解决这个问题

12.解决移动端浏览器 vh 单位异常问题

在做一个响应式布局时用 vh 单位定义了元素的高度，结果在发现在移动端的 Chrome 和 Firefox 浏览器中，浏览器 URL 栏显示的情况下元素都出现了错位。

查找到原因是移动端下浏览器对 100vh 的定义不考虑 URL 栏的高度（无论 URL 栏显示还是隐藏），可以用下面这张图直观地体现问题：

左侧是我们期望的 100vh “全屏”的高度，但右侧是 URL 栏显示的状态下“全屏”的高度，100vh 在这时已经超出了“全屏”高度。

解决方案如下:

1.目前找到最好的解决方案是项目： JS 执行过一次初始化 vhCheck() 后，就可以直接用 CSS 变量 –vh-offset 修正 100vh 了。

用法：

1. npm install vh-check

2. import vhCheck from ‘vh-check’

vhCheck()

3. main {

height: 100vh; /* 兼容不支持 var 变量的浏览器 (<= IE11) */

height: calc(100vh – var(–vh-offset, 0px)); /* 修正后的 100vh */

}

2.设置根节点 body,html的高度为100%,然后依次让子节点的高度也依次的100%

例html:

css:

body , html {

height:100%;

}

.container{

height:100%;

}

13.IOS 手机qq浏览器 劫持video标签视频播放转换为自带视频播放并且无法关闭,除非刷新页面(大坑)

解决方案:   使用canvas播放器:muffinman.io/html-canvas….

14.手机搜狗 火狐浏览器 点击图片出现瞬间的蓝色背景色

解决方案:   img{ background-color:transparent; }

15.transition动画中用left制作动画可能会出现卡卡的不流畅

解决方案：使用translate3D方式制作动画就可以了。

16.流式布局

/父元素/ display: flex; align-items: center; justify-content: center; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: flex-start; /子元素/ flex: auto; flex: none;

17.如何解决移动端hover的问题？

用:active代替，直接可以解决，最快。

18.vue,nuxt项目 如果默认用的router:{mode:’history’} 部署到线上环境切换到子路由刷新404问题

解决方案:

1.服务器端配置 www.cnblogs.com/tugenhua070…

2.router:{mode:’hash’}

3.服务器搭建node环境

19.js 监听手机横竖屏事件orientationchange触发时 文档不一定渲染完成延迟大概在300ms, 所以 只有延迟处理页面布局.不延迟解决方案

解决方案:使用css

//竖屏           @media screen and (orientation: portrait) {}

//横屏            @media screen and (orientation:landscape) {}

20.flex布局子元素在低版本安卓机上justify-content:space-between失效问题

先检查子元素是不是块元素，如果不是设置display:block就可以解决问题

21.flex-wrap: wrap相对较旧版本手机自带浏览器不换行问题如何解决？

对于父元素有必要就text-align:center；子元素就设置display:inline-block。

22.CSS3属性-webkit-font-smoothing字体图标抗锯齿渲染

[class^=”svg-icon-“], [class*=” svg-icon-“] { text-rendering: auto; -webkit-font-smoothing: antialiased; }

23.数字badge由圆圈到圆角椭圆自动伸长技巧

.round {        background-color: #28a745;        min-width: 18px;        height: 18px;        line-height: 18px;        text-align: center;    }

24.弹框里的滚动条滚动时，外部body也跟着滚动的问题

解决方案：弹框弹出时，可以把body的position设为absolute;top:0;left:0;41

25.移动端近似解决1像素边框问题(伪类 + transform 实现)

个人认为伪类+transform是比较完美的方法了。原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

单条border样式设置：

.scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ”; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }         四条boder样式设置:

.scale-1px{ position: relative; margin-bottom: 20px; border:none; } .scale-1px:after{ content: ”; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }              最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：

if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector(‘ul’).className = ‘scale-1px’; }               优点：

1. 所有场景都能满足

2.支持圆角(伪类和本体类都需要加border-radius)

缺点：对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

26.解决ios浏览器橡皮筋效果

document.body.addEventListener(        ‘touchmove’,      function(e) {          e.preventDefault() //阻止默认的处理方式(阻止下拉滑动的效果)      },     { passive: false }     ) //passive 参数不能省略，用来兼容ios和android

在需要滚动的区域添加touchmove.stop

27.H5消除ios移动端 transition闪屏问题

.css {     -webkit-transform-style: preserve-3d;     -webkit-backface-visibility: hidden;     -webkit-perspective: 1000;}

28.html5+CSS 禁止IOS长按复制粘贴实现

/设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;/ *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -khtml-user-select:none; /早期浏览器/ -moz-user-select:none;/火狐/ -ms-user-select:none; /IE10/ user-select:none; } input,textarea { -webkit-user-select:auto; /webkit浏览器/ margin: 0px; padding: 0px; outline: none; }

29.移动端 css禁止保存图片

img { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }

30.css实现中间粗两头细的线条

&::after { content: ”; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: -webkit-linear-gradient(left, #000 -4%, #e6e6ff 50%, #000 100%); }

30.audio currentTime 手机端无效

andorid的话，是需要执行了play，才可以设置currentTime的，可以改成这样解决

audio_player = $(‘#auplayer’)[0]; audio_player.play(); audio_player.pause(); audio_player.currentTime = 52; audio_player.play();