在之前开发一些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浏览器,在开发模式下可以看到本地项目的服务地址
- 选中之后,就可以查看网络请求,控制台之类的信息了