h5开发的一些我的总结

时间 2019-12-05

标签 h5 开发一些我的总结繁體版

原文原文链接

在以前开发一些h5活动页的过程当中，踩过了一些坑，因此整理出一些我的所接触到的对于h5活动页开发的总结，主要分为：布局适配，交互体验，兼容，调试工具这四个方面。欢迎你们补充指正。javascript

1. 布局适配

a. 让当前viewport的宽度等于设备的宽度

<meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1">
复制代码

理解：css

phys.width，device-width: 通常咱们所指的宽度width即为phys.width，而device-width又称为css-width。其中咱们能够获取phys.width即width经过document.documentElement.clientWidth;而获取css-width经过 window.screen.width获取。如iphone6的phys.width为750px，而css-width为375px。html
浏览器的一个默认行为：假设，浏览器若是把电脑端的980px的网页展示在宽度为750px的iphone6手机屏上，确定会放不下，手机端横向会出现滚动条，怎么处理这个问题呢，很简单，浏览器默认一个虚拟窗口，不一样浏览器有不一样的虚拟窗口宽度的默认值如：safari iphone：980px; opera:850px; Andriod webkit:800px;IE:974px;而后会把这个980px虚拟窗口装进宽度为750px的iphone6中，固然这样的话必须缩放，这就是为何在手机中展示电脑端页面没有出现横向滚动条，并且字迹明显变小的缘由。vue
meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1"的做用体现 (meta标签中，width有两个含义，第1、width为phys.width，第二，width也为虚拟窗口的width)java
此时的iPhone6的phys.width也变成了css-width即375px，能够经过document.documentElement.clientWidth获取获得此时phys.width确实为375px。ios
若是此时的设计图是375px的手机端页面，此时的虚拟窗口的宽度也为375px，再装进phys.width为375px的手机，固然如设计稿同样的效果，不会缩放，也不会出现横向滚动条。es6

b. Rem 适配

为了精确的还原视觉稿，移动端样式采用px做为默认单位，使用postcss-pxtorem做为转换rem工具插件
安装web

yarn add postcss-pxtorem
 #OR
 npm i postcss-pxtorem -S
复制代码

package.json配置(以width375视觉稿为准)npm

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": "37.5",
        "propList": ["*"]
      }
    }
  }
复制代码

在index.html中重置root节点的rem数值json

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    // 事件监听
    document.addEventListener('DOMContentLoaded', resetRem)
    window.onresize = resetRem
    /**
     * [resetRem 重置Rem数值]
     */
    function resetRem () {
      let documentCtx = document.documentElement
      documentCtx.style.fontSize = documentCtx.clientWidth / 10 + 'px'
    }
  </script>
</html>
复制代码

input的placeholder文本位置偏上的状况

input的placeholder会出现文本位置偏上的状况:PC端设置line-height等于height可以对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal;

2. 交互体验

a. 去掉 a，input 在移动端浏览器中的默认样式（禁止 a 标签背景在移动端使用 a标签作按钮的时候，点按会出现一个“暗色”的背景，去掉该背景）

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
复制代码

b .禁止长按 a，img 标签长按出现菜单栏(使用 a标签的时候，移动端长按会出现一个菜单栏，这个时候禁止呼出菜单栏)：

a, img {
    -webkit-touch-callout: none; /*禁止长按连接与图片弹出菜单*/
}
复制代码

c. 流畅滚动

body{
    -webkit-overflow-scrolling:touch;
}
复制代码

d. 禁止用户长按选中

-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; 
复制代码

e. transition清除闪屏

有时候须要使用到一些动效，可是会出现闪屏的状况

-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D
-webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏
复制代码

3.兼容

a. vue2.0打包出来的项目在ios9中打开会白屏

这是个较为隐蔽的问题，当时线上出这个问题的话定位了好久，按照网上搜出来的结果都是说es6的结果没有转译，因此就尝试安装了一些转译插件。后面发现只须要在config/index.js里改一下声明关键词，而后问题就解决了。

const path = require('path')
// 改成
var path = require('path')
复制代码

b. 某些状况下非可点击元素如(label,span)监听click事件,ios下不会触发

针对此种状况只需对不触发click事件的元素添加一行css代码便可

cursor: pointer;
复制代码

c. ios对时间date()的支持不同

var date =new Date("2016-05-31 00:00:00 ");
复制代码

这种写法在安卓和pc上都正常的,惟独在ios手机上会显示NAN,调试发现,ios上只支持格式:

var date =new Date("2016/05/31 ");
复制代码

调试发现2016/05/31等同2016-05-31 00:00:00,也就是说ios默认就是从0开始计算的,咱们不须要设置后面的时分秒为00:00:00

d. text-indent和box-sizing，部分安卓机中使用text-indent属性会使元素宽度超过100%

// 加上便可正常
box-sizing: border-box;
复制代码

4.调试工具 --- Xcode

在这些样式交互完成以后，在移动端咱们须要进行接口调试，这样的话咱们就很但愿能像pc端的开发同样，能够看到控制台, 网络请求状况这些信息，可以更好的帮助咱们完成开发，定位问题。以前想查看接口信息的话，是使用charles抓包工具的，可是我的以为仍是并非那么方便，没有作到很好的集成。下面介绍一下我本人习惯使用的工具Xcode