原来不管是在学校还是上一个公司实习,做的都是后台管理系统类的页面,对于移动端适配没有要求,现在的工作主要是做移动端,为此,在这里记下工作中用到的移动端适配的知识。
参考内容
http://www.daqianduan.com/6281.html
http://www.qdfuns.com/notes/18165/f08c0ec910dad6d2c90807a0318abda8.html
识别手机的方法
1 | let u = navigator.userAgent; |
页面初始化宽度设置
1 | (function(doc, win){ |
meta设置
1 | <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> |
- width: [pixel_value | device-width],是viewport的宽度,从200-10000,默认为980像素
- height: [pixel_value | device-width],是viewport的高度,从223-10000,默认为980像素
- initial-scale: 初始化的缩放比例 0-10
- minimum-scale:允许用户缩放到最小比例
- maximum-scale: 允许用户放大的最大比例
- user-scalable”: [yes | no] 允许用户是否可以手动缩放
1 | <meta content='yes' name='apple-mobile-web-app-capable' /> |
☝ 是否启动webapp功能,会删除默认的苹果工具栏和菜单栏
1 | <meta content='black' name = 'apple-mobile-web-app-status-bar-style' /> |
☝ 当启动webapp功能的时候,显示手机信号时间电池的顶部导航栏的颜色,你默认的时候是白色(default),可以定位黑色(black)和灰色半透明(black-translucent)
1 | <meta name="format-detection" content='telphone=no, email=no' /> |
☝ 格式检测,忽略页面中的数字识别为电话号码,邮箱1
<meta name="screen-orientation" content="portrait"/>
☝ uc强制竖屏1
<meta name="full-screen" content="yes">
☝ UC强制全屏
1
<meta name="x5-fullscreen" content="true">
☝ QQ强制全屏
移动端手势事件
- touchstart //当手指接触屏幕时触发
- touchmove // 当已经接触屏幕的手指开始移动后触发
- touchends // 当手指离开屏幕时出发
- touchcancel //当在华东手机的过程中突然出现一个系统时间,比如电话,这就会被cancel掉
click事件会有3000ms的延时
切图
设计稿按照640的尺寸去切图。然后页面可以当作320来写,字体大小都除以2
如果一个元素本身有font-size 那么这个元素的其他用em的长度的基准是这个元素本身的字体大小 不是父元素〉
localhost换成ip没有用
运行项目的时候,把loacahost换成ip,会打不开页面,解决办法如下:
修改webpack的配置1
2
3
4"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
运行的时候,地址栏可能是 0.0.0.0:8080,这时候要把0.0.0.0改成localhost
ps: 这个在代码提交的时候要改过来
通过meta唤醒app(ios)
app-id:就是产品的id
app-argument: 传递的参数1
<meta name="apple-itunes-app" content="app-id=000000,pt=xxxxx,ct=xxxxx app-argument=">
字符串格式化输出
1 | JSON.stringify(jsObj, null, "\t"); |
未完待续。。。