移动端开发
我们可以叫做webapp,其实就是运行再移动端浏览器中的web网站
开发移动端应用我们需要学习的知识点可以分成如下几个:
- 移动端布局适配
- 移动端事件 主要是touch事件的使用
- 移动端交互效果
- 移动端前端框架
- 移动端调试
移动端适配
移动端从屏幕尺寸和屏幕类型等方面来看 和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延迟的问题