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