移动开发的现状
- 移动端屏幕尺寸更小
- 移动端和pc端开发本质上一样的,都是用HTML/CSS/JavaScript的技术。
问题: 移动端开发与传统的pc端开发有什么区别?
-
浏览器不同(兼容性区别)
-
pc端:浏览器种类很多,需要添加不同的私有前缀
谷歌浏览器 苹果浏览器、 UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、搜狗浏览器、猎豹浏览器…
-
移动端:浏览器只需要兼容webkit内核即可,前缀只需要添加
-webkit-
即可并且手机更新换代很快,所以浏览器版本都比较新,对于css3新属性的支持会更好
-
-
屏幕尺寸不同(适配区别)
-
pc端:屏幕较大,通过版心适配即可
-
移动端:屏幕很小,宽度一般占满一行,需要自适应(流式布局:百分比布局)
并且移动端屏幕尺寸很多:
Android:
320*480
480*800
540*960
720*1280
1080*1920
2k屏 4k屏
iphpne:640*960
640*1136
750*1334
1242*2208
-
-----------------
移动端调试问题
- 真机调试:使用真的手机进行访问。
- 模拟器调试:开发代码阶段使用的。
手机设备五花八门,屏幕尺寸都大不一样,尤其是安卓端,给我们的页面预览带来了一些麻烦。在实际工作中,作为开发者不可能有足够的设备让我们去测试(除了测试部门 ),即便有,效率也特别的低,因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。
视口viewport
先把vscode默认设置的视口参数去掉。
问题: 写一个div宽度为320px,使用手机端比如iPhone5打开,应该是占满的,但是看效果?
并没有占满一行,此时html标签的宽高是980px。
原因是因为手机端的页面打开的时候会在视口中打开。
原因: 历史原因:乔布斯发明了视口
- 早期,只有pc端网页,早期网页的版心为980px,手机端如果直接查看980px宽度的网页,只能看到一部分,用户体验极差!!
- 后来乔布斯为了让移动端可以看到完整的网页,发明了视口这个概念!专门解决移动端查看pc端网页的问题
视口:就是用于盛放网页的容器
- 可以缩放
- 宽度默认是980px
视口作用的过程:
移动端打开网页——》先把网页在980px的视口中打开(完美展示)——》再把视口缩放和移动端一样大,显示在移动端中(让用户可以在屏幕中看到全部的网页)
随着技术发展,现在已经有针对于移动端的网页了,此时我们可以设置视口的参数,完成效果。
- 视口的宽度是可以设置的
视口参数设置:
//width 设置视口的宽度
width=device-width //设置视口宽度为设备的宽度(常用)。
//initial-scale 设置初始缩放比例
initial-scale=1.0 //表示不缩放
//user-scalable 设置是否允许用户缩放
user-scalable=no //不允许用户缩放
//maximum-scale //设置允许的最大缩放比例
maximum-scale=1.0 //可以不设置,因为都禁止用户缩放了。
//minimum-scale 设置允许最小缩放比
minimum-scale=1.0 //可以不设置,因为都禁用用户缩放了。
//标准写法:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">