从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

时间 2019-11-08

标签开始 web 移动屏幕相关基本知识调试适配栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的探索之旅吧！html

1、基础知识

一、屏幕

移动设备与PC设备最大的差别在于屏幕，这主要体如今屏幕尺寸和屏幕分辨率两个方面。前端

一般咱们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（通常用英寸来度量）。git

而分辨率则通常用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。github

二、长度单位

在Web开发中可使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）作为长度单位，咱们最经常使用px（像素）作为长度单位。浏览器

咱们能够将上述的几种长度单位划分红相对长度单位和绝对长度单位。服务器

例如：iPhone3G/S和iPhone4/S的屏幕尺寸都为 3.5 英寸（in）可是屏幕分辨率却分别为 480x320px、960x480px，由此咱们能够得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并无固定的长度）。微信

三、像素密度

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸能够喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，因为计算机显示设备中的最小单位不是墨汁点而是像素，因此用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，咱们将PPI、DPI都称为像素密度，但PPI应用更普遍，DPI在Android设备比较常见。网络

利用屏幕分辨率计算 PPI :ide

四、设备独立像素

随着技术发展，设备不断更新，出现了不一样PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素再也不是统一的度量单位，这会形成一样尺寸的图像在不一样PPI设备上的显示大小不同。

以下图，假设你设计了一个163x163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1x1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5x0.5寸大小了。

可是作为用户是不会关心这些细节的，他们只是但愿在不一样PPI的设备上看到的图像内容差很少大小，因此这时咱们须要一个新的单位，这个新的单位可以保证图像内容在不一样的PPI设备看上去大小应该差很少，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

举例说明就是iPhone 3G（PPI为163）1pt = 1px，iPhone 4（PPI为326）1pt = 2px。

经过上面例子咱们不难发现 pt 同px是有一个对应（比例）关系的，这个对应（比例）关系是操做系统肯定并处理，目的是确保不一样PPI屏幕所能显示的图像大小是一致的，经过 window.devicePixelRatio 能够得到该比例值。

因此，咱们如何处理在不一样 pt/px 比例上使得显示相同大小的图片呢？

很简单，在美工设计图片的时候，多设计几种尺寸的图片。

五、像素

5.一、物理像素

物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，咱们以上所讨论的都指的是物理像素。

获取屏幕的物理像素尺寸：

window.screen.width;

window.screen.height;

5.二、CSS像素

CSS像素，与设备无关像素，指的是经过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），可是咱们可通缩放来改变CSS像素的大小。

咱们须要理解的是物理像素和CSS像素的一个关系，1个物理像素并不老是等于一个CSS像素，经过缩放，一个CSS像素可能大于1个物理像素，也可能小于1个物理像素。

2、调试

一、模拟调试

现代主流浏览器均支持移动开发模拟调试，一般按F12能够调起，其使用也比较简单，能够帮咱们方便快捷定位问题。

二、真机调试

模拟调试能够知足大部分的开发调试任务，可是因为移动设备种类繁多，环境也十分复杂，模拟调试容易出现差错，因此真机调试变的很是必要。

有两种方法能够实现真机调试：

一、将作好的网页上传至服务器或者本地搭建服务器，而后移动设备经过网络来访问。（重点）

二、借助第三方的调试工具，如weinre、debuggap、ghostlab(推荐) 等。

真机调试必须保证移动设备同服务器间的网络是相通的。

3、视口

视口（viewport）是用来约束网站中最顶级块元素<html>的，即它决定了<html>的大小。

一、PC 设备

在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素作为度量单位。

经过以往CSS的知识，咱们都能理解<html>的大小是会影响到咱们的网页布局的，而viewport又决定了<html>的大小，因此viewport间接的决定并影响了咱们网页的布局。

/* 获取viewport的大小 */
document.documentElement.clientWidth;
document.documentElement.clientHeight;

在PC端，咱们经过调整浏览器窗口能够改变 viewport 的大小，为了保证网页布局不发生错乱，须要给元素设定较大固定宽度。

二、移动设备

移动设备屏幕广泛都是比较小的，可是大部分的网站又都是为PC设备来设计的，要想让移动设备也能够正常显示网页，移动设备不得不作一些处理，经过上面的例子咱们能够知道只要viewport足够大，就能保证本来为PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。

在移动设备上viewport再也不受限于浏览器的窗口，而是容许开发人员自由设置viewport的大小，一般浏览器会设置一个默认大小的 viewport，为了可以正常显示那些专为PC设计的网页，通常这个值的大小会大于屏幕的尺寸。

以下图为常见默认viewport大小（仅供参考）：

从图中统计咱们得知不一样的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页能够正常在移动设备下浏览。

可是因为咱们手机的屏幕很小，而 viewport 的值却很大，因此页面全部的内容就会缩小以适应屏幕，因此用手机看起来，这些字体和图片就会特别小，这就像手机设置里面有个电脑版显示同样。

要解释上面的缘由，须要进一步对移动设备的 viewport 进行分析，移动设备上有2个viewport（为了方便讲解人为定义的），分别是 layout viewport 和ideal viewport。

一、layout viewport（布局视口）指的是咱们能够进行网页布局区域的大小，一样是以CSS像素作为计量单位，能够经过下面方式获取

/* 获取layout viewport */
document.documentElement.clientWidth;
document.documentElement.clientHeight;

经过前面介绍咱们知道，若是要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport（如IOS为980px），这个viewport实际指的是layout viewport。

二、ideal viewport（理想视口）设备屏幕区域，（以设备独立像素PT、DP作为单位）以CSS像素作为计量单位，其大小是不可能被改变，经过下面方式能够获取。

/* 获取ideal viewport有两种情形 */
/* 新设备 */
window.screen.width;
window.screen.height;

/* 老设备 */
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

理解两个viewport后咱们来解释为何网页会被缩放或出现水平滚动条：

其缘由在于移动设备浏览器会默认设置一个layout viewport，而且这个值会大于ideal viewport，那么咱们也知道ideal viewport就是屏幕区域，layout viewport是咱们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，因而就出现滚动条了，那么为何有的移动设备网页内容被缩放了呢？移动设备厂商认为将网页完整显示给用户才最合理，而不应出现滚动条，因此就将layout viewport进行了缩放，使其刚好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport / layout viewport。

三、移动浏览器

移动端开发主要是针对IOS和Android两个操做系统平台的，除此以外还有Windows Phone。

移动端主要能够分红三大类，系统自带浏览器、应用内置浏览器、第三方浏览器。

3.一、系统浏览器

指跟随移动设备操做系统一块儿安装的浏览器，通常不能卸载。好比 iPhone 的 safari 浏览器。

3.二、应用内置浏览器

一般在移动设备上都会安装一些APP例如 QQ、微信、微博、淘宝等，这些APP里每每会内置一个浏览器，咱们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器通常功能比较简单，而且客户端开发人员能够更改这个浏览器的某些设置。

3.三、第三方浏览器

指安装在手机的浏览器如FireFox、Chrome、360等等。

在IOS 和 Android 操做系统上自带浏览器、应用内置浏览器都是基于Webkit内核的。

4、屏幕适配

通过分析咱们获得，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，咱们能够经过设置 <meta name="viewport" content="">来进行控制，并改变浏览器默认的layout viewport的宽度。

一、viewport 详解

viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数以下：

经过设置属性 content="" 实现，中间以逗号分隔。

示例：

<meta name="viewport" content="width=device-width, initital-scale=1.0, user-scalable=no">

width ：设置 layout viewport 宽度，其取值可为数值或者device-width。

height：设置layout viewport 高度，其取值可为数值或者device-height

initital-scale：设置页面的初始缩放值，为一个数字，能够带小数。

maximum-scale：容许用户的最大缩放值，为一个数字，能够带小数。

minimum-scale：容许用户的最小缩放值，为一个数字，能够带小数。

user-scalable：是否容许用户进行缩放，值为"no"（不能缩放）或"yes"（能够缩放）。

注：device-width 和 device-height 就是 ideal viewport 的宽和高。

二、控制缩放

设置 <meta name="viewport" content="initial-scale=1">，这时咱们发现网页没有被浏览器设置缩放。

设置 <meta name="viewport" content="width=device-width">，这时咱们发现网页也没有被浏览器设设置缩放。

当咱们设置 width=device-width，也达到了 initial-scale=1 的效果，得知其实 initial-scale = ideal viewport / layout viewport。

两种方式均可以控制缩放，开发中通常同时设置 width=device-width 和 initial-scale=1.0（为了解决一些兼容问题）参见移动前端开发之viewport深刻理解 (http://www.cnblogs.com/2050/p/3877280.html)，即：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

三、适配方案

关于 em 和 rem

em 是相对长度单位（参照父元素），其参照当前元素字号大小，若是当前元素未设置字号则会继承其祖先元素字号大小。

例如：.box {font-size: 16px;} 则 1em = 16px

.box {font-size: 32px;}则 1em = 32px，0.5em = 16px

rem 相对长度单位（参照 html 元素），其参照根元素(html)字号大小。

例如：html {font-size: 16px;} 则 1rem = 16px

html {font-size: 32px;} 则 1rem = 32px，0.5rem = 16px.

从零开始学 Web 之 移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配