meta用法
//禁止屏幕缩放,强制文档宽度与设备宽度1:1,防止ios因缩放出现滚动条,导致定位bug
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!-- 禁止手机号长按呼出 忽略邮箱状态-->
// ios 在ios上会被识别电话号码,显示颜色,改变样式也不生效,所以禁用
<meta name="format-detection" content="telephone=no, email=no" />
//iphone私有标签,允许全屏浏览
<meta name="apple-mobile-web-app-capable" content="yes" />
//标题头部的颜色 必须配合全屏才生效
// content值 : default(白色),black(黑色)black-translucent(灰色半透明;black-translucent”将会占据页面px位置,浮在页面上方
(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
iOS 与 OS X 端字体兼容
ios 横屏时会重置字体大小
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
如果仅仅在移动端,则text-size-adjust:none即可,桌面端使用字体缩放失效,最佳方案为text-size-adjust:100%;
IOS移动端click事件300ms的延迟响应
移动端双击缩放、双击滚动等移动端浏览器默认的行为设置,使得用户再执行这些操作时,会先判断用户是否触发默认行为的判断,导致移动端点击事件存在300ms的等待
解决方案
- 1、禁用缩放,用户无法缩放
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
- 2、设置视口宽度,识别网站的适配,禁用浏览器默认的双击缩放行为,用户仍可自己缩放
<meta content="width=device-width name="viewport" />
- 3、 设置 touch-action css属性,浏览器兼容性不好
//该元素上的操作不会触发用户代理的任何默认行为,就无需进行300ms的延迟判断
touch-action: none
- 4、fastclick js插件 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉。脚本比较大
npm install --save fastclick
import fastclick from 'fastclick'
fastclick.attach(document.body)
- 5、只用touch 事件
iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格
可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '');
iphone 点击按钮,屏幕闪动问题
点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景
// css中设置该样式 只用于iOS
-webkit-tap-highlight-color:rgba(0,0,0,0)
webkit-tap-highlight-color为任何颜色;想要禁用这个高亮,设置颜色的alpha值为0即可。
ios css属性去除默认样式
-webkit-appearance: none; //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-touch-callout:none; //禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
执行动画可能会导致页面卡顿
在特定元素使用transform启动GPU硬件加速
.animateTran {
transform: translateZ(0);
}
ios滚动问题
1.相关属性
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.
// 兼容安卓和IOS的css写法如下,当给滚动区域添加-webkit-overflow-scrolling: touch;,ios上滚动效果变得丝滑
overflow:auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
- 值为 auto : 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
- 值为 touch : 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
2. *{-webkit-overflow-scrolling: touch}导致滚动卡死;
项目组同事偷懒直接全局设置,导致ios浏览器下滚动直接卡死,该属性要慎用
3. 定位元素下使用-webkit-overflow-scrolling: touch,滚动卡住
在使用了定位元素(不管是相对定位、绝对定位、固定定位)添加-webkit-overflow-scrolling: touch,也会存在滚动几次后可滚动区域会卡主,不能在滑动;==这时给元素增加个z-index值==
4. iframe在ios无法滚动的bug
需要在iframe 外包裹一层滚动 div
<style lang="less" scoped>
.pdf_iframe_wrap{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.previewPdf{
width: 100%;
height: 100%;
}
}
</style>
<div class="pdf_iframe_wrap">
<iframe class='previewPdf' :src="pdfUrl" height="100%" width="100%">
</iframe>
</div>
5. 固定定位,滚动容器的内容动态添加,ios下不滚动
固定定位区域内,加一个div作为滚动区域 ;并设置position: static;滚动容器内的子元素height+1
<style lang="less" scoped>
//vant中的pop样式为固定定位
.van-popup{
overflow-y: visible
.scroll-box{
height: 100vh;
position: static;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.hos-wrap{
height:calc( 100% + 1px )
}
}
}
</style>
<van-popup v-model="popShow" position="bottom" :style="{ height: '100%' }">
<div ref="scrollBox" class="scroll-box" v-loading="loading">
<div class="hos-wrap" style="height:calc( 100% + 1px )">
<hospital-list ref="hosList" :key-words="hosKeyWords" @selected="hosSelected" @onSuccess="geolocationReady"
@onError="geolocationReady">
</hospital-list>
</div>
</div>
</van-popup>
另外,以上方法解决不了的情况下,那我们就只能乖乖的使用isScroll.js第三方插件,实现页面内部滚动
ios 固定定位问题
1. 固定定位元素随着页面的滑动而抖动问题
问题产生的原因是因为fixed元素在页面滚动时属性值变为absolute,在页面停止滚动瞬间,才恢复fixed
解决方案 : 避免滚动元素内部使用 position: fixed
<style lang="less" scoped>
.my_page {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.mk_nav_header{
position: fixed;
height: 44px;
top: 0;
left: 0;
right: 0;
}
//滚动区域
.mk_nav_content {
position: absolute;
top: 44px;
bottom: 50px;
left: 0;
right: 0;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
.mk_nav_footer {
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height : 50px;
}
<template>
<div class='my_page'>
<mk-header class="mk_nav_header"></mk-header>
<!-- 滚动区域 -->
<div class="mk_nav_content">
<p v-for="index in 100" :key="index">我是第{{index}}个元素</p>
</div>
<mk-footer class="mk_nav_footer"></mk-footer>
</div>
</template>
2. ios 软键盘弹出导致定位元素失效
其实本质上是一样, 当fixed 元素的父级不出现滚动,这个问题也基本不存在