移动WEB开发基础
1. 移动端基础
1.1 浏览器现状
1. PC端常见浏览器:
360浏览器
、谷歌浏览器
、火狐浏览器
、QQ浏览器
、百度浏览器
、搜狗浏览器
、IE浏览器
2. 移动端常见浏览器:
UC浏览器
、QQ浏览器
、欧朋浏览器
、百度手机浏览器
、360安全浏览器
、谷歌浏览器
、搜狗手机浏览器
、猎豹浏览器
、...
3. 国内浏览器环境:
国内的UC
、QQ
、百度
等手机浏览器都是根据Webkit
修改过来的内核
,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android
开发的一样。
总结:兼容移动端主流浏览器,处理Webkit内浏览器即可
1.2 手机屏幕现状
- 移动端设备
屏幕尺寸
非常多,碎片化严重 -
Android
设备有多种分辨率:480 * 800
、480 * 854
、540 * 960
、720 * 1280
、1080 *1920
、2k
、4k
...
- 近年来
iPhone
的碎片化也加剧了,其设备的主要分率有:640 * 960
,640 * 1136
,750 * 1334
,1242 * 2208
...
- 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是
px
1.3 常见移动端屏幕尺寸
注:作为前端开发,不建议大家去纠结dp
,dpi
,pt
,ppi
等单位
1.4 移动端调试方法
-
Chrome Devtools
(谷歌浏览器)的模拟手机调试 - 搭建本地
web
服务器,手机和服务器一个局域网
内,通过手机访问服务器 使用外网服务器
,直接IP
或域名
访问 - 使用
外网服务器
,直接IP
或域名
访问
1.5 总结
- 移动端浏览器我们主要对
webkit
内核进行兼容 - 我们现在开发的
移动端
主要针对手机端
开发 - 现在移动端碎片化比较严重,分辨率和屏尺寸大小不ー
- 学会用谷歌浏览器模拟手机界面以及调试
2. 视口
视口( viewport
)就是浏览器显示页面内容的屏幕区域
。视口可以分为布局视口
、视觉视口
和理想视口
2.1 布局视口 layout viewport
- 一般移动设备的浏览器都默认设置了一个
布局视口
,用于解决早期的PC端
页面在手机上显示的问题。 -
iOS
、Android
基本都将这个视口分辨率设置为980px
,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页
。
2.2 视觉视口 visual viewport
- 字面意思,它是用户正在看到的
网站的区域
。注意:是网站的区域
。 - 我们可以通过缩放去操作
视觉视口
,但不会影响布局视口
,布局视口
仍保持原来的宽度
2.3 理想视口 ideal viewport
- 为了使网站在
移动端
有最理想的浏览
和阅读宽度
而设定 -
理想视口
,对设备来讲,是最理想
的视口尺寸
- 需要手动添写
meta视口标签
通知览器操作 -
meta视口标签
的主要目的:布局视口的宽度
应该与理想视口的宽度
一致,简单理解就是设备有多宽,我们布局的视口就多宽
2.4 总结
-
视口
就是浏览器显示页面内容
的屏幕区域 - 视口分为
布局视口
、视觉视口
和理想视口
- 我们移动端布局想要的是
理想视口
就是手机屏幕有多宽,我们的布局视口就有多宽
- 想要
理想视口
,我们需要给我们的移动端页面添加meta视口标签
2.5 meta
视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
序号 | 属性 | 描述 |
---|---|---|
1 | width | 宽度设置的是viewport宽度,可以设置device-width特殊值 |
2 | initial-scale | 初始缩放比,大于0的数字 |
3 | maximum-scale | 最大缩放比,大于0的数字 |
4 | minimum-scale | 最小缩放比,大于0的数字 |
5 | user-scalable | 用户是否可以缩放,yes或no(1或0) |
2.6 标准的viewport
设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
3.二倍图
3.1 物理像素和物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果
6
、7
、8
是750*1334
- 我们开发时候的
1px
不是一定等于1个物理像素
的 -
PC
端页面,1个px等于1个物理像素的,但是移动端就不尽相同 - 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比
注意:
- 物理像素,就是我们说的分辨率,iPhone8的物理像素是750
- 在iPhone8里面,1px开发像素 = 2个物理像素
- PC端和早期的手机屏幕/普通手机屏幕:1CSS像素 = 1 物理像素
- Retina(视网膜屏幕)是一种显示技术,可以把更多的物理像素点压缩在一块屏幕里面,从而达到更高的分辨率,并提高屏幕显示的细腻程度
3.2 多倍图
- 对于一张
50px*50px
的图片,在手机Retina
屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊 - 在标准的
viewport
设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题 - 通常使用二倍图,因为
iPhone6
、7
、8
的影响,但是现在还存在3倍图
、4倍图
情况,这个看实际公司需求
1 | /* 在iPhone8下面 */
2 | img{
3 | /* 原始图片100*100px */
4 | width:50px;
5 | height:50px;
6 | }
7 | .box{
8 | /* 原始图片100*100px */
9 | background-size:50px 50px
10 | }
3.3 背景缩放background-size
background-size
属性规定背景图像的尺寸
1 | background-size:背景图片宽度 背景图片高度;
-
单位:
长度
|百分比
|cover
|contain
-
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
-
contain
把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
4. 移动端开发选择
4.1 移动端主流方案
-
单独制作移动端页面(主流)
如:
京东商城手机版
、淘宝触屏版
、苏宁易购手机版
-
响应式页面兼容移动端(其次)
如:
三星手机官网
4.2 单独移动端页面(主流)
通常情况下,网址域名前面加m
(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
4.3 响应式兼容PC
移动端
-
三星电子官网:https://www.samsung.com/cn/。通过判断屏幕亮度来改变样式,以适应不同终端。
-
缺点:制作麻烦,需要消耗很大精力去调兼容性问题。
4.4 总结
现在市场常见的移动端开发有单独制作移动端页面 和 响应式页面两种方案,现在市场主流的选择还是单独制作移动端页面。
5. 移动端技术解决方案
5.1 移动端浏览器
- 移动端浏览器基本以
webkit
内核为主,因此我们就考虑webkit
兼容性问题 - 我们可以放心使用
H5
标签和CSS3
样式 - 同时我们浏览器的私有前缀我们只需要考虑添加
webkit
即可
5.2 CSS
初始化 normalize.css
移动端CSS
初始化推荐使用normalize.css
-
N
ormalize.css:
保护了有价值的默认值 -
Normalize.css:
修复了浏览器的bug
-
Normalize.css:
是模块化的 -
Normalize.css:
拥有详细的文档
官网地址:http://necolas.github.io/normalize.css/
5.3 CSS3
盒子模型 box-sizing
- 传统模式宽度计算:
盒子的宽度
=CSS
中设置的width + border + padding
-
CSS3
盒子模型:盒子的宽度
=CSS中设置的宽度width
里面包含了border
和padding
- 也就是说,我们的
CSS3
中的盒子模型,padding
和border
不会撑大盒子了
1 | /* css3盒子模型 */
2 | box-sizing:border-box;
3 | /* 传统盒子模型 */
4 | box-sizing:content-box;
传统orCSS3盒子模型?
- 移动端可以全部
CSS3
盒子模型 -
PC
端如果完全需要兼容,我们就用传统模式。如果不考虑兼容性,我们就选择CSS3
盒子模型
5.4 特殊样式
1 | /*css3盒子模型*/
2 | box-sizing: border-box;
3 | -webkit-box-sizing: border-box;
4 | /*点击高亮我们需要清除清除 设置为transparent完成透明*/
5 | -webkit-tap-highlight-color: transparent;
6 | /*在移动端浏览器默认的外观在iOS上加上这个属性オ能给按钮和输入框自定义样式*/
7 | -webkit-appearance: none;
8 | /*禁用长按页面时的弹出菜单*/
9 | img,a{-webkit-touch-callout: none;}
6. 移动端常见布局
6.1 单独制作移动端页面(主流)
-
流式布局
(百分比布局) -
flex弹性布局
(强烈推荐) less+rem+媒体查询布局
混合布局
6.2 响应式页面兼容移动端(其次)
- 媒体查询
bootstrap
7. 移动端不使用jQuery
- 可以使用
jQuery
,但是不建议,因为jQuer
库用在移动端显得太冗余
了 -
jQuery
做了很多桌面浏览器的兼容
问题特别是IE
,但是移动端
没有IE浏览器
- 主流的浏览器:
谷歌
、火狐(2016年停止了维护和更新)
、safari
、百度
、360
、qq
...
- 特点:内核基本上都是
webkit
或者blink
,兼容-webkit-
- 使用
H5
的API
或者说使用一个 叫做:zepto.js
的库(基于高版本浏览器开发)
7.1. 移动端开发注意事项
-
移动端
常用布局是非固定像素
,也就是用百分比
,所以必须设置盒子尺寸为边框盒
, 所有标签
和伪元素
都要设置
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box; /*移动端的内核主要是webkit,所以给它做个兼容就可以了*/
}
7.2. 移动端点击高亮效果
-
css
样式-普通:tap-highlight-color: red;
兼容:-webkit-tap-highlight-color: red;
- 不想要高亮效果就设为透明色:
transparent
7.3. 移动端的重置样式
-
移动端
input
的独有样式:-webkit-appearance: none;
none
为清除所有的浏览器默认外观button
清除为按钮的表单的浏览器默认外观...
这个样式必须加前缀-webkit-
,不加前缀无效 -
表单不允许改变尺寸:
resize: none;
7.4 移动端的公用样式
/* 左浮动*/
.f_left {
float: left;
}
/*右浮动*/
.f_right {
float: right;
}
/*清除浮动*/
.clearFix::after,
.clearFix::before {
content: '';
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
上一篇: JS闭包的理解
下一篇: 移动web前端开发高效实战(二)