移动端地图
<link rel="stylesheet" href="/50.104.5.41:81/minemapapi/v1.3/minemap.css">
<script src="//50.104.5.41:81/minepapi/demo/js/minemap-wmts.js">
这两个文件是用来做移动端地图
移动端meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
meta标签常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
meta标签共有两个属性，分别是http-equiv属性和name属性。
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
name的属性为viewport(移动端的窗口)代表 浏览器可视区域的大小。内容width=device-width意思是显示窗口宽度等于设备屏幕宽度。initial-scale=1确保网页加载时，以1:1的比例呈现，不会有任何的缩放。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
❀。width=device-width ：宽度等于当前设备的宽度
❀。initial-scale=1 ：初始的缩放比例。（默认为1）
❀。minimum-scale=1 ：允许用户缩放到的最小比例。（默认为1）
❀。maximum-scale=1 ：允许用户缩放到的最大比例。（默认为1）
❀。user-scalable=no ：用户是否可以手动缩放（默认为no）
总结：上述这段代码可以理解为meta标签常用于定义页面的说明，name属性为viewport表示这是移动端窗口。与之对应的属性值为content，content中的内容是对name属性的具体描述。内容width=device-width意思是显示窗口宽度等于设备屏幕宽度。initial-scale=1确保网页加载时，以1:1的比例呈现，不会有任何的缩放。
移动端页面初始化
let deviceWidth = document.documentElement.clientWidth
if (deviceWidth > 750) deviceWidth = 750
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'
document.body.clientWidth ==> BODY对象宽度
document.documentElement.clientWidth ==> 可见区域宽度
移动端和pc端的区别
第一：pc考虑的是浏览器的兼容性，而移动端考虑的是手机分辨率和不同操作系统的适配。
第二：移动端缺少hover事件，但是有弹出手机键盘的处理，pc端没有。
第三：移动端一般做自适应布局，使用rem和meta标签，pc一般做响应式，使用px、@media和meta标签。
第四：移动端有上拉加载，下拉刷新，pc没有。
移动端注意事项
第一：首先在页面代码的头部加入一行<meta name="viewport" content="width=device-width, initial-scale=1" />
第二：不使用绝对宽度、高度、字体大小，例如px，需要使用width: xxrem或width: xx%或width: auto。
第三：使用流动布局float，如果宽度太小，后面元素就会滚动到前面元素的下方，不会溢出，出现水平滚动条。另外使用绝对定位也要非常小心。
响应式和自适应
响应式：所有设备(pc、手机、平板)的代码都是一样的。
自适应：不同设备的代码是不一样的。
响应式的概念应该覆盖了自适应，而且涵盖的内容更多。
因为pc固定就那么几个尺寸，所以使用响应式，手机端尺寸不统一，样式很多所以用自适应。
上拉加载，下拉刷新
https://fy98.com/2018/06/15/vue-mint-ui-pullup-pulldown/
https://www.jianshu.com/p/bfb5ca56b4fb
组件：vue-infinite-scroll
调摄像头拍照
https://www.jianshu.com/p/184f9d704c71
移动端适配
https://imweb.io/topic/5a523cc0a192c3b460fce3a5
let deviceWidth = document.documentElement.clientWidth
if (deviceWidth > 750) deviceWidth = 750
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'
document.documentElement返回的是html根元素，为什么除以7.5，因为给的UI页面就是750px，那么就以750px作为标准，除以7.5以后表示如果屏幕宽度为750px的话，1rem=100px，也可以拿540px作为标准，那么就除以5.4就可以了。
总结：如果UI的宽度500，手机的屏幕也是500，那么除以5，就表示html根元素的fontSize是100，也就是1rem=100，某个元素的宽度是50，就写成0.5rem，0.5rem*100=50，这样子屏幕上面的页面就可以按照UI给的样式等比例的画出来，假如现在手机的屏幕宽度扩大1倍变成1000，那么除以5就是200，1rem=200，刚才的元素是0.5rem就变成100了，跟着屏幕的宽度一样等比例的扩大，缩小也是一样都是等比例的扩大缩小，这样子就是自适应。
点击穿透
原因：A和B两个元素，B在A上面，当点击B的时候A上发生click事件。
解决方案用阻止事件冒泡。
300ms延迟
原因：由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。
解决方案一：禁用缩放
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
解决方案二：将click改为touch
调用摄像头或者手机相册
首先需要安装cordova相机插件，这个插件定义了一个全局对象navigator.camera，它用来提供拍照和从系统相册中选取图片的API。
调用相机
navigator.camera.getPicture(onSuccess => {
}, onError => {
}, {
quality: 8,
sourceType: Camera.PictureSourceType.CAMERA
})
调用相册
navigator.camera.getPicture(onSuccess => {
}, onError => {
}, {
quality: 8,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
})
第一个参数是成功后的回调，第二个参数是失败后的回调，第三个参数是用来定义相机设置。
判断是不是安卓系统
当用cordova打包app时会形成一个apk，里面自带window.kiwi，它的值如果是true则为安卓，否则不是。
app退出
window.kiwi.page.exit()
页面调试
vConsole插件
网友评论