问题&解决方案
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();
