移动WEB基础知识(上)(基本概念,视口,移动浏览器)
2018-03-09 10:06
543 查看
移动WEB基础知识(上)(基本概念,视口,移动浏览器)
基础知识
屏幕移动设备与PC设备最大的差异在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面。
屏幕尺寸:通常我们所指的屏幕尺,实际上指的是屏幕对角线的长度(一般用英寸来度量)如下图所示
屏幕分辨率:而分辨率则一般用像素来度量 px,表示屏幕水平和垂直方向的像素数,例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成,如下图所示
长度单位
在Web开发中可以使用px(像素)、em、pt(点)、in(英寸)、cm(厘米)做为长度单位,我们最常用px(像素)做为长度单位。
如上图所示,iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸(in)但是屏幕分辨率却分别为480*320px、960*480px,由此我们可以得出英寸是一个绝对长度单位,而像素是一个相对长度单位(像素并没有固定的长度)。
像素密度(PPI)
DPI(Dots Per Inch)是印刷行业中用来表示打印机每英寸可以喷的墨汁点数,计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的最小单位不是墨汁点而是像素,所以用PPI(Pixels Per Inch)值来表示屏幕每英寸的像素数量,我们将PPI、DPI都称为像素密度,但PPI应用更广泛,DPI在Android设备比较常见。
PPI值的越大说明单位尺寸里所能容纳的像素数量就越多,所能展现画面的品质也就越精细,反之就越粗糙。
Retina即视网膜屏幕,苹果注册的命名方式,意指具有较高PPI(大于320)的屏幕。
思考:在屏幕尺寸(英寸)固定时,PPI和像素大小的关系?
结论:屏幕尺寸固定时,当PPI 越大,像素的实际大小就会越小,当PPI越小,像素实际大小就越大。
设备独立像素
随着技术发展,设备不断更新,出现了不同PPI的屏幕共存的状态(如iPhone3G/S为163PPI,iPhone4/S为326PPI),像素不再是统一的度量单位,这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
如下图,假设你设计了一个163*163的蓝色方块,在PPI为163的屏幕上,那这个方块看起来正好就是1*1寸大小,在PPI为326的屏幕上,这个方块看起来就只有0.5*0.5寸大小了。
做为用户是不会关心这些细节的,他们只是希望在不同PPI的设备上看到的图像内容差不多大小,所以这时我们需要一个新的单位,这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多,这就是独立像素,在IOS设备上叫PT(Point),Android设备上叫DIP(Device independent Pixel)或DP。
举例说明就是iPhone 3G(PPI为163)1dp = 1px,iPhone 4(PPI为326)1dp = 2px。
我们也不难发现,如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致,可以把iPhone 4/S的尺寸放大一倍(它们是一个2倍(@2x)的关系),即在iPhone3G/S的上尺寸为44*44px,在iPhone4/S上为88*88px,我们要想实现这样的结果可以设置44*44dp,这时在iPhone3G/S上代表44*44px,在iPhone4/S上代表88*88px,最终用可以看到的图像差不多大小。
通过上面例子我们不难发现dp同px是有一个对应(比例)关系的,这个对应(比例)关系是操作系统确定并处理,目的是确保不同PPI屏幕所能显示的图像大小是一致的,通过window.devicePixelRatio可以获得该比例值。
下图展示了iPhone不同型号间dp和px的比例关系
从上图我们得知dp(或pt)和px并不总是绝对的倍数关系(并不总能保证能够整除),而是window.devicePixelRatio ~= 物理像素/独立像素,然而这其中的细节我们不必关心,因为操作系统会自动帮我们处理好(保证1dp在不同的设备上看上去大小差不多)。
像素(物理像素,css像素)
物理像素指的是屏幕渲染图像的最小单位,属于屏幕的物理属性,不可人为进行改变,其值大小决定了屏幕渲染图像的品质,我们以上所讨论的都指的是物理像素。
// 获取屏幕的物理像素尺寸 window.screen.width; window.screen.height;
CSS像素指的是通过CSS进行网页布局时用到的单位,其默认值(PC端)是和物理像素保持一致的(1个单位的CSS像素等于1个单位的物理像素),但是我们可通缩放来改变其大小。
我们通过调整浏览器的缩放比例可以直观的理解CSS像素与物理像素之前的对应关系,如下图所示:
视口(PC设备视口和移动设备视口)
概念:视口(viewport)是用来约束网站中最顶级块元素<html>的,即它决定了
<html>的大小。
PC设备
在PC设备上viewport的大小取决于浏览器窗口的大小,以CSS像素做为度量单位。
通过以往CSS的知识,我们都能理解
<html>的大小是会影响到我们的网页布局的,而viewport又决定了
<html>的大小,所以viewport间接的决定并影响了我们网页的布局。
// 获取viewport的大小 document.documentElement.clientWidth; document.documentElement.clientHeight;
PC端布局案例(效果:随着视口的变化,布局不变,监听视口大小) <html lang="en"> <head> <meta charset="UTF-8"> <title>视口</title> <style> .viewport { /*1.如果确定具体的宽高 值,当超出viewport的大小的时候,会出现滚动条 2.如果设置的宽度为100%,当子元素宽高大于父容器的时候,会自动换行 3.如果不想出现滚动条或者换行,可以将子元素设置为父容器的百分比*/ width: 100%; /*width: 1152px;*/ height: 200px; background-color: #CCC; } .viewport .box { /*width: 288px;*/ width: 25%; height: 200px; text-align: center; line-height: 200px; font-size: 28px; float: left; background-color: blue; border-right: 2px solid #ccc; box-sizing: border-box; } </style> </head> <body> <!-- 显示窗口信息 --> <div class="info"> <span class="width"></span> <span class="height"></span> </div> <div class="viewport"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> <!-- 一个类似jQuery的库 --> <script src="../js/zepto.js"></script> <script> var clientWidth, clientHeight; var width = $('.width'), height = $('.height'); // 用来获取viewport function getSize() { clientWidth = document.documentElement.clientWidth; clientHeight = document.documentElement.clientHeight; width.text('PC设备Viewport的宽度为:' + clientWidth); height.text('PC设备Viewport的高度为:' + clientHeight); } // 调用 getSize(); // 监听窗口变化 window.onresize = function () { getSize(); } </script> </body> </html>
移动端设备
viewport特性,一个移动专属的Meta值,用于定义视口的各种行为
移动设备屏幕普遍都是比较小的,但是大部分的网站又都是为PC设备来设计的,要想让移动设备也可以正常显示网页,移动设备不得不做一些处理,通过上面的例子我们可以知道只要viewport足够大,就能保证原本为PC设备设计的网页也能在移动设备上正常显示,移动设备厂商也的确是这样来处理的。
在移动设备上viewport不再受限于浏览器的窗口,而是允许开发人员自由设置viewport的大小,通常浏览 器会设置一个默认大小的viewport,为了能够正常显示那些专为PC设计的网页,一般这个值的大小会大于屏幕的尺寸。
从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值,这个值保证大部分网页可以正常在移动设备下浏览。
问题:在iPhone5s和部分Android中我们发现页面内容(文字、图片)被缩放了(变的非常小),而在部分安卓设备中则出现了滚动条。那么产生缩放和滚动条的原因是什么呢?
答:要解释上面的原因,需要进一步对移动设备的viewport进行分析,移动设备上有2个viewport(为了方便讲解人为定义的),分别是
layout viewport和
ideal viewport。
layout viewport
layout viewport(布局视口)指的是我们可以进行网页布局区域的大小,同样是以CSS像素做为计量单位,可以通过下面方式获取
// 获取layout viewport document.documentElement.clientWidth; document.documentElement.clientHeight;
通过前面介绍我们知道,如果要保证为PC设计的网页在移动设备上布局不发生错乱,移动设备会默认设置一个较大的viewport(如IOS为980px),这个viewport实际指的是layout viewport。
ideal 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。移动端主要可以分成三大类,系统自带浏览器、应用内置浏览器、第三方浏览器
系统浏览器:指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器:通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等,这些APP里往往会内置一个浏览器,我们称这个浏览器为应用内置浏览器(也叫WebView),这个内置的浏览器一般功能比较简单,并且客户端开发人员可以更改这个浏览器的某些设置,在我们理实的开发里这个浏览器很重要。
第三方浏览器:指安装在手机的浏览器如FireFox、Chrome、360等等。
在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基于Webkit内核的。
相关文章推荐
- 从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,视口,屏幕适配
- C/C++基础知识:函数指针和指针函数的基本概念
- Objective-C 基础知识之(十三):类目、延展、协议、代理等的基本概念
- 继承的基础知识1——有关继承的基本概念
- 【Android基础知识】WebView基本用法
- 黑马程序员-JS基础知识回顾一------------几个基本概念
- C/C++基础知识:函数指针和指针函数的基本概念
- C/C++基础知识:函数指针和指针函数的基本概念
- 移动web开发基础知识
- 基础知识|数据库的一些基本概念
- Java学习笔记-《Java程序员面试宝典》-第四章基础知识-4.1基本概念(4.1.8-4.1.9)
- Java基础知识系列之注解基本概念
- Web开发基础--一些基本概念
- 移动web的基础知识
- CSS基础知识总结之基本概念
- 面试宝典第四章Java基础知识——4.1基本概念
- 移动WEB基础知识
- java web基础1Tomcat服务器基本知识
- JAVA基础知识整理(一)———面向对象的基本概念
- Java学习笔记-《Java程序员面试宝典》-第四章基础知识-4.1基本概念(4.1.11-4.1.12)