h5开发的一些个人总结

913 阅读6分钟

在之前开发一些h5活动页的过程中,踩过了一些坑,所以整理出一些个人所接触到的对于h5活动页开发的总结,主要分为:布局适配,交互体验,兼容,调试工具这四个方面。欢迎大家补充指正。

1. 布局适配

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

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

理解:

  • 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。

  • 浏览器的一个默认行为: 假设,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,肯定会放不下,手机端横向会出现滚动条,怎么处理这个问题呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如:safari iphone:980px; opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条,而且字迹明显变小的原因。

  • meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1"的作用体现 (meta标签中,width有两个含义,第一、width为phys.width,第二,width也为虚拟窗口的width)

  • 此时的iPhone6的phys.width也变成了css-width即375px,可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

  • 如果此时的设计图是375px的手机端页面,此时的虚拟窗口的宽度也为375px,再装进phys.width为375px的手机,当然如设计稿一样的效果,不会缩放,也不会出现横向滚动条。

b. Rem 适配

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

 yarn add postcss-pxtorem
 #OR
 npm i postcss-pxtorem -S

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

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

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

<!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

  • 打开调试工具,选择Simulator
  • 在Hardware中选择我们要进行调试的机型以及系统

  • 打开浏览器,输入一个本地项目的地址,同时打开safari浏览器,在开发模式下可以看到本地项目的服务地址

  • 选中之后,就可以查看网络请求,控制台之类的信息了