关于移动端开发

移动端开发

我们可以叫做webapp，其实就是运行再移动端浏览器中的web网站

开发移动端应用我们需要学习的知识点可以分成如下几个：

1. 移动端布局适配
2. 移动端事件 主要是touch事件的使用
3. 移动端交互效果
4. 移动端前端框架
5. 移动端调试

移动端适配

移动端从屏幕尺寸和屏幕类型等方面来看 和pc设备大有不同，所以从布局和适配等方面我们都需要考虑到
Viewport视口的作用

：在移动端浏览器上面用来显示网页的那一块区域

如何查看浏览器视口的大小

document.documentElement.cilentWidth

移动端布局中media 标签的使用

meta标签中各个属性的作用：

content=“width=device-width” ：让视口的宽度等于设备的宽度
initial-scale = 1.0 ：初始化的缩放比例默认为1.0
maximum-scale=1.0： 最大的缩放比例是1.0
user-scalable =no : 用户是否进行缩放（不让用户进行缩放）

移动端布局方式：

响应式布局：

如图：响应式布局就是根据用户进行对浏览器的缩放的同时，样式进行自动变化，图中，当浏览器的宽度小于400时，body变成粉红色，当浏览器宽度大于700时，body变成红色

media screen and （max/min-width：**px）{ 样式 }

自适应布局： 一般用rem vw vh 。 vw vh相当于视口的1%， 有兼容性问题

移动端的屏幕和PC的屏幕有一个很大的区别：移动端是视网膜高清屏（Retina），Retina屏幕有一个属性交DPR（设备像素缩放比）

DPR = 物理像素 / 逻辑像素
物理像素：屏幕的尺寸
逻辑像素：浏览器上像素

如ipone5、6 它的DPR为2
所以物理像素比逻辑像素为2：1
在这样的手机中，我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染，从而保证图片文字等不失真

布局单位的适配

适配移动端视口尺寸大小计算：
方法一：

window.onresize =function(){
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 3.2 + “px”}， 写在script中
若是以ipone6 的尺寸为设计稿标准，应该除以3.75 （375为ipone6 的逻辑像素）

方法二：

常见的问题：

1px边框

2.响应式图片

3 300ms延迟的问题