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播放器:https://muffinman.io/html-canvas-video-player/,但是播放视频没声音.

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.服务器端配置 https://www.cnblogs.com/tugenhua0707/p/8127466.html

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();

https://juejin.im/post/5e34e2216fb9a02fba3a357a

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论