分享下移动端和 PC 端开发中的区别, 希望对大家有所帮助~~
移动端和 PC 端的区别
1. 引入 fastClick
- 移动端点击事件 300ms 延迟
import fastclick from "fastclick";
fastclick.attach(document.body);
- fastclick 的原理: 监听 touchend 事件，取消原本 300ms 后真正的 click 事件，自己生成分发一个点击事件。
2. meta 标签
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
3. postcss-px-to-viewport
移动端直接使用 px 单位
// .postcssrc.js
module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
};
- 原理: 单位转化成了视窗单位 vw
- 注意事项: 使用行内式的 px 单位无法被转化
4. v-console 移动端控制台, 查看报错及接口信息等
// 开发环境下面使用vConsole进行调试
if (process.env.NODE_ENV === "development") {
const VConsole = require("vconsole");
new VConsole();
}
移动端兼容性问题
1. 安卓: vue-draggable 插件的兼容性问题
- 问题: 使用的是 draggable 插件, 点击删除时, 一定几率下同时触发拖拽事件
- 解决方案:
// 使用类包裹拖拽div, 让删除事件和拖拽事件分开
:options="{ animation: 300, handle: '.img-wrapper' }"
2. ios: 底部栏无法下沉
- 问题: iphoneX 以上机型, 取消了 HOME 键, 非安全区域需要重新配置
- 解决方案:
在meta标签中, 添加viewport-fit=cover // 底部栏下沉
在底部栏添加 padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom) // 调整安全区域高度
PC 端兼容性问题
1.IE 上下载文件显示 400
不兼容版本
const url = `${PRE}/gzw-api/notice/file/download.do?fileName=${file.name}&url=${file.outerUrl}`;
window.open(url, "_self");
兼容版本
const url = `${PRE}/gzw-api/notice/file/download.do?fileName=${encodeURI(file.name)}&url=${encodeURI(file.outerUrl)}`;
window.open(url, "_self");
结论: 在 IE 上使用 window.open 直接下载文件时,需要对文件名,链接进行转义,原因是 IE 无法自动转义
