移动端知识点

页面布局设计:

1,viewport 移动端视图 (标准的移动端设计图 width:375px 750px)

<meat name = "viewport"

显示宽的比例是矢量,根据手机显示宽度而定 / 缩放比例是1.0 / 不能进行手动缩放 /最大和最小 缩放比例是1.0

content = "width= device-width,initial-scale = 1.0,user-scaleable = no,maximum-scale= 1.0,minimum-scale = 1.0">

 

2,盒模型

box-sizing :border-box

 

3,flex布局

 

4,rem ------------------------重点不要用px

 

 

 

 

5,移动端布局viewport完美处理方式:---------------动态处理

<meat name = "viewport"

content = "width= device-width,initial-scale = 1.0,user-scaleable = no,maximum-scale= 1.0,minimum-scale = 1.0">

js 代码:

var clientWidth = document.documentElement.clientWidth, viewport = document.querySelector('meta[name="viewport"]'); viewportScale = clientWidth / 640; viewportWidth = 640; viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0'); }

 

达到设计图和代码值一样处理。

 

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 

clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 

offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。

 

6,移动端的touch事件

给元素注册touch移动端事件:

window.onload = function (){

var docum = document.getElementById('doc');

docum.addEventLister('touchstart',function(){

//注册手指触摸事件

},false);

}

-------------touches 不兼容 (--------------targetTouches =====全部兼容)

 

7,移动端单点多点事件

单点--------拖动,移动(典型------淘宝的轮播图)

多点--------缩小,放大 /旋转 会涉及到缩小放大比例,a = (原生)b/c(当前) 旋转(旋转的角度rtan())

targtouches changetouches

 

8,移动端

iscroll.js 移动端

hammer 移动端

 

常用h5:

1,window.navigator.userAgent ----------Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

 

2,获取地里位置的方式

IP地址定位数据

GPS地理定位数据

wi-fi地理定位数据

手机地理定位数据

用户自定定位数据

 

3,geolocation 分为单次定位请求和重复定位请求

单次定位更新:navigator.geolocatin.getCurrentPostion(updateLocation,handleLocationError);

重复定位更新:navigator.geolocation.watchPostion(updateLocation,handleLocationError);

关闭重复定位的实时更新 var watchID = navigator.geolocation.watchPostion(updateLocation,handleLocationError);

关闭实时请求需要定位的返回对象 navigator.geoloction.clearWatch(watchID);

图表设计类:

1,新增画图应用

canvas

SVG

VML

 

2,

gl = 获取canvas的id值:

let gl = oc.getContext('2d');

gl.moveTo(19,233); 起点

gl.lineTo(12,111); 路径

gl.closeP ath(); 闭合

 

gl.storke(); 描边画图

gl.fill(); 填充画图

 

改变边线: gl.lineWidth = '12';

边线颜色: gl.storkeStyle='red';

填充颜色: gl.fillStyle = 'red';

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值