移动端知识点

页面布局设计：

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';