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 元素的父级不出现滚动，这个问题也基本不存在