视口的概念
视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
视觉视口 visual viewport
字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
用户可以通过缩放来查看网站的内容。如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度。
理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定
布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。
视口标签
理想视口才是我们设计移动web需要的视口,而理想视口就是将布局视口的宽度修改为视觉视口
meta标签
<!-- meta视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
1、content属性 : 用来设置视口的,width属性就是视口的宽,它可以是任意数字,设为 device-width 表示设备的宽度,这就是我们需要的理想视口,当没有设置时默认会按980px去显示
2、initial-scale : 视口初始的缩放比,可设置为大于0的数字
3、user-scalable : 设置是否允许用户进行缩放,可设置为 yes / no 或 1 / 0
4、maximum-scale : 设置视口的最大缩放比,可设置为大于 0 的数字
5、minimum-scale : 设置视口的最小缩放比,可设置为大于 0 的数字
6、最标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
注意事项:
- ios10 及 ios10+ 设置最大缩放值无效
- initial 和 width 是有冲突的
- initial 和 最小值 是一致的
- 部分安卓机型,不接受width = 具体数值 这样的操作
viewport的width即使设置了固定值 ,但是设置了initial-scale这个属性后,会自动把width变成device-width(即使width不设置,也会默认设置width=device-width)
正常情况下,我们会把初始、最小 、最大都设置为1,不允许用户缩放页面。但是因为maximum无效,后期,我们会通过 js 来禁止缩放
涉及显示的几个概念
物理像素与CSS像素
设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。
CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位,是抽象的,而不是实际存在的。
分辨率(物理像素)
screen.height //screen.width返回显示设备的信息。
除非调整显示设备的分辨率,否则看作是常量。
(显示)分辨率就是屏幕上显示的像素个数,分辨率160×128的意思是水平像素数为160个,垂直像素数128个。
分辨率越高,像素的数目越多,感应到的图像越精密。
而在屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。
以分辨率为1024×768的屏幕来说,即每一条水平线上包含有1024个像素点,共有768条线,即扫描列数为1024列,行数为768行。
PPI
pixels per inch所表示的是每英寸所拥有的像素(pixel)数目。
手机屏幕的PPI当达到一定数值时,人眼就分辨不出颗粒感了。
这个数值是多少?按照2010年前苹果公司CEO史蒂夫·乔布斯(Steve Jobs)在iPhone 4发布会上对视网膜技术的介绍:“当你所拿的东西距离你10-12英寸(约25-30厘米)时,它的分辨率只要达到300ppi这个‘神奇数字’(每英寸300个像素点)以上,你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。)
一张图带你了解:视网膜屏幕

DPR设备像素比
每个设备都有属于自己的独立像素,通过浏览器的模拟器,我们可以看到,每个设备的独立像素。
DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值:
DPR = 设备像素 / CSS像素(某一方向上)
普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3
因为大部分桌面显示器的devicePixelRatio为1,所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。
常见移动设备的PPI与DPR

二倍图
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如iphone6 是 750* 1334
我们开发时候的1px 不是一定等于1个物理像素的
一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
以iphone6为例,它的物理像素比是2,用css设置一张图片50 * 50的图片,此时在手机上的显示是100 * 100
的分辨率,相当于被拉伸了两倍,图片看起来就很模糊,解决办法是用100 * 100的图,再设置它的宽高为50 * 50。
lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。
对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
背景精灵也是,会把精灵图 * 2,但获取它的background-position时,要先把精灵图 / 2,再去量它的位置 , 然后
设置background-size : 宽 / 2 高 / 2 ;
注:背景缩放background-size
background-size: cover : 背景拉伸到能覆盖这个容器
background-size: contain : 背景拉伸,当宽或高其中有一个铺满,就不再拉伸了
初始化
做移动端页面时的初始化:
(1)设置视口标签
(2)引入normalize.css(是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一)
(3)去掉一些移动端的默认模式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*移动端的a标签点击会有高亮效果,需要清除,设置为transparent 完成透明*/
html{ -webkit-tap-highlight-color: transparent ; }
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
html{ -webkit-appearance: none ; }
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
移动开发的技术选型(常见布局)
1、单独做移动开发
通常情况下输入网址,会判断是PC端还是移动端打开,移动端打开就在域名前加 m. ,打开移动端的网页
PC端和移动端为两套网站,pc端是pc端的样式,移动端在写一套,专门针对移动端适配的一套网站
– 单独做移动端有下方几个技术方案
(1)、流式布局(宽度设为百分比的形式)
(2)、flex弹性布局(强烈推荐)
(3)、less + rem + 媒体查询 或者 rem + flexible.js (推荐)
(4)、混合布局(推荐)
2、响应式布局
(1)、媒体查询
(2)、bootstrap
移动端技术解决方案
1.移动端浏览器兼容问题
移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。
可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
2.移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css:保护了有价值的默认值 / 修复了浏览器的bug / 是模块化的 / 拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
3.移动端大量使用 CSS3盒子模型box-sizing
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
移动端可以全部CSS3 盒子模型
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型
4.移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*移动端的a标签点击会有高亮效果,需要清除,设置为transparent 完成透明*/
html{ -webkit-tap-highlight-color: transparent ; }
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
html{ -webkit-appearance: none ; }
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }