移动端技巧总结

对移动端开发和适配的技巧总结，主要从适配和注意事项两方面进行总结

1.媒介查询

<style>
    @media(min-width: 300px) and (max-width: 320px){

    }
  </style>
<link rel="" herf="" media="(min-width: 300px) and (max-width: 320px)

2. 手机端加一个meta

  <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0",maximum-scale=1.0, minimum-scale=1.0>

3. 移动端特点

响应式其实用的不多，主要是在一些新闻网站或博客。大型网站多用两套页面，无IE

1. 手机上没有hover
2. Vue swipe、jQuery swipe；touch事件
3. 没有resize
4. 没有滚动条

4.REM手机专用

4.1什么是REM

• em 一个单位m的宽度，一个汉字的宽度
• rem rootem 根元素html的font-size 16px

4.2REM和EM的区别

• 默认的html font-size 是16px

• chrome默认最小font-size为12px

• em == font-size

• 区别em单位自己，rem根元素

4.3 手机端方案的特点

• 百分比布局，无法解决宽高比例的问题

• 一切单位以宽度为准，就能完美还原设计稿

4.4 REM使用JS动态调整，可以和其它单位同时存在

<script>
    var pageWidth = window.innerWidth
    document.write(`<style>html{font-size: ${pageWidth/10}px}</style>`)
  </script>
<style>
    * {
      margin: 0;
      padding: 0;
    }
    .child{
      background: #ddd;
    }
    body {
      font-size: 16px;
    }
    .child {
      width: 4rem;
      height: 2rem;
      margin: 0.5rem;
      float: left;
      border: 1px solid red /*特别小的还是用px*/
    }
    .clearfix::after{
      content: '';
      display: block;
      clear: both;
    }
  </style>

4.5在scss里使用px2rem

在scss文件里添加

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 是设计稿的宽度，根据设计稿的宽度填写

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

5.点击300ms延迟

5.1 click产生延迟的原因

单刚开始出现全触屏手机时的网站都是为桌面端设计的，没有设置<meta name="viewport">,为了方便手机用户，手机浏览器添加了双击缩放的功能。手指在屏幕上快速点击两次，浏览器回将页面缩放至原始比例。

如何判定用户双击呢？在第一次点击屏幕后300ms内有第二次点击，就判定用户想要缩放而不是点击页面元素；所以当用户点击页面元素300ms后浏览器才会响应用户操作，判定用户为点击操作而不是缩放。

5.2 解决方法

1. 设置meta:vp `

   <meta name="viewport" content="width=device-width">
   

   • android添加name=viewport的meta即可消除延迟
   • iOS上必须设置属性content=“width=device-width”，统一采用iOS

2. 使用touchstart事件而不是click

3. 使用fastclick库（2017年以后逐渐不用）

6. 点击击穿原因及解决

6.1 什么是点击穿透

在移动端，比如当用户通过监听touchstart事件，绑定监听函数让浮层关闭时，关闭后浮层后面对应位置页面其他元素也会被点击。如果浮层后是一个链接，用户点击浮层关闭后大约300ms页面同时发生跳转

6.2 产生原因

触屏设备为了区分用户双击缩放，对click做了300ms延迟触发，因此用户在移动端触屏设备的操作流程以及事件触发如下：

1. 手指点击屏幕触发touchstart事件
2. 手指短暂停留，如有小移动触发touchmove事件
3. 手指离开屏幕触发touchend事件
4. 等待300ms看用户是否再次触摸屏幕，若没有在用户手指离开的位置触发click事件

总结： 击穿的根源在第四步，touchstart事件绑定的监听函数已经让浮层关闭，300ms后在用户手指离开位置触发click事件将点击不到浮层，自然点击到浮层后面的页面元素，出现点击击穿的现象。

6.3 解决办法

1. 监听改用click事件替换touchstart事件关闭浮层，就产生导致300ms延迟的判定
2. 还是采用touchstart事件进行监听，在touchstar事件里阻止默认事件Event.preventDefault(),阻止300ms后的click触发
3. 异步处理延后浮层关闭事件，添加定时器setTimeout大于等于300ms。

7. 关于1px的实现

7.1 为什么要实现1px

在移动端页面时，border: 1px solid red;，还是会觉得1px太宽不能完美还原设计稿，所以需要实现比1px更细的边框

7.2 实现方式

1. viewport缩放： viewport适配的方案，适配的原理是整个页面放大缩小，当然也包括边线

2. 设置0.5px

   .item {
         border-bottom: .5px solid black;
         /*ios有效 部分android无效*/
       }
   

3. 伪元素 + transform：iOS/android都有效，缺点处理一条边框还好，如果是4条边框两个伪元素不够得新增标签来实现

.item::after {
      content: '';
      display: block;
      height: 1px;
      transform: scaleY(0.5);
      background: #black;
      position: relative;
      top: 13px;
    }

4. 线性渐变背景: 兼容性好

   .item-4-border {
         margin: 10px 0;
         padding: 10px;
         background: 
            linear-gradient(to bottom, #ccc .5px, transparent 0), 
            linear-gradient(to left, #ccc .5px, transparent 0), 
            linear-gradient(to right, #ccc .5px, transparent 0), 
              linear-gradient(to top, #ccc .5px, transparent 0);
       }