开发者社区> aicoder> 正文

07-移动端开发教程-移动端视口

简介:
+关注继续查看

老马初始学习视口的概念的时候,看了很多的文章,看来很多的资料,鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。

1. 关于屏幕

1.1 屏幕尺寸

设备屏幕尺寸是指屏幕的对角线长度。比如:iphone6/7是4.7寸,iphone6/7p是5.5寸。

1英寸 = 2.54厘米
3.5in = 3.5*2.54cm = 8.89cm
4.0in = 4.0*2.54cm = 10.16cm
4.8in = 4.8*2.54cm = 12.192cm
5.0in = 5.0*2.54cm = 12.7cm
5.5in = 5.5*2.54cm = 13.97cm
6.0in = 6.0*2.54cm = 15.24cm
547
手机尺寸

在这里可以查看大部分流行手机的屏幕尺寸:地址

1.2 屏幕分辨率

屏幕分辨率是指:屏幕的像素点数

在PC端的分辨率常见是:[ 1366*768, 1440*900, 1024*768, 1400*900,...]
移动端常见分辨率: [2160*1080, 1920*1080, 1334*750, 1136*640...]

在说分辨率的时候我们常常会把大的值说在前面,所以在PC端屏幕宽度比高度的值要大一点,第一个值一般是指的宽度第二个值为高度。

移动端正好相反,手机一般宽度都是小于高度,所以第一个值是宽度。

当前流行的设备分辨率地址

补充几个概念
Full HD(全高清): 19201080分辨率,iphone7p就是这个。
4K屏: 也叫QHD或UHD(超高清),最小分辨率是3840
2160,电视用的多
设备相机的像素
640*480 = 307200 = 30万像素
1600*1200 = 1920000 = 200万像素
3264*2488 = 8120832 = 800万像素
4536*3024 = 13716864 = 1400万像素

1.3 设备的PPI/DPI

PPI(Pixels Per Inch)| DPI(Dots Per Inch),两个值是屏幕每英寸的像素数量,即像素密度(Screen density)。

一般的计算方法或者公式: DPI= 对角线分辨率 / 屏幕尺寸

屏幕对角线的分辨率也就是屏幕对角线上的像素点数,可以根据已知的横纵分辨率通过勾股定理计算得。

补充:三角形勾股定理
700

计算如下手机dpi:


296
手机dpi计算

勾股定理算出对角线的分辨率

476

对角线分辨率除以屏幕尺寸:2203/5≈440dpi

1.4 设备像素(device pixel)与逻辑像素(css像素)

1.4.1 设备像素(device pixel):

设备像素是物理概念,指的是设备中使用的物理像素,也就是屏幕中的发光的点数(屏幕由很多个发光点组成,每个发光点可以显示不同的颜色,这些发光的点组成了屏幕)。

比如iPhone 5的分辨率640 x 1136px。横向有640个发光的点,纵向有1136个发光的点。所以我们说iPhone5 的设备水平像素是640像素,指的是640个发光点。

1.4.2 CSS像素(css pixel):

CSS像素是Web编程的概念,CSS样式代码中使用的逻辑像素。1个逻辑像素可能对应多个物理像素(发光点)。

在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,相对的是设备像素(device pixel)。

例如1:
假设老马电脑的物理分辨率是1024* 768。 如果我故意设置操作系统分辨率为512*384(水平和垂直各缩小1倍),那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍,所以CSS中的像素只是相对,不是绝对的。

例如2:
iPhone 5使用的是Retina视网膜屏幕,横向逻辑css的像素是320px,但是实际物理像素是640的点,所以水平方向就会有2个点对应css的1个像素,垂直也是两倍的关系,也就是1个css的逻辑像素:由水平2个物理像素点和垂直2个像素点也就是(2乘2=4)4个物理像素点 显示1px宽1px高的一个逻辑的css像素。如果是css像素是:2px*2px呢?

500
左侧是正常的屏幕,右侧是视网膜屏

由于这个2倍的关系,我们也称iphone5为两倍屏,也就是dpr

1.4.3 设备独立像素(DIP)

设备独立像素(DIP,device-independent pixel,density-independent pixel),简单地来说设备独立像素就是:独立于设备的用于逻辑上衡量像素的单位。在移动Web开发中就是指的CSS的逻辑像素

1.5 设备像素比(devicePixelRatio)

设备像素比(dpr) 与 ppi有一定的相关性,即ppi越大,dpr也相应的较大,1dpr 对应160ppi ,其对照表如下:

  dpi dpi dpi dpi
ppi 120 160 240 320
默认缩放比(dpr) 0.75 1.0 1.5 2.0

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素(也称物理像素)和CSS像素的比值(设备独立像素)。

DPR = 设备像素 / CSS像素

仅仅计算横向或者纵向。比如:iphone5为例:水平物理像素640 页面缩放100%时,横向320px,则dpr = 640 / 320 = 2

DPR也有对应的javascript属性window.devicePixelRatio (ie11+,edge,chrome49+, Safari9.1+)

DPR不一定都是整数,尤其是android设备十分的碎片化!

2. 视口

问题:PC端设计的网页一般都是大于960px 尺寸,移动端上的浏览器为了能够将那些为PC端设计的网站正常显示,一般都给一个默认的整屏的宽度为980px(css像素),虽然能这样让移动端浏览器兼容大部分PC端页面,但是页面缩放后文字会变得非常小,用户需要手动放大缩小才能看清楚,体验非常差。


258
PC端页面在手机上显示效果

苹果首先在浏览器上引入了视口的功能,随后各大浏览器都跟随实现。

视口(viewport)是用户网页的可视区域,也可称之为视区。

2.1 PC端视口

PC端视口的大小跟浏览器的可视区的宽高保持1:1固定比例对应。也就是说浏览器改变宽高,视口跟着改变。

2.2 移动端视口

在移动端视口与移动端浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。

由于移动端的视口可以进行放大、缩小、改变宽高,所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致,这就出现两个概念:布局视口视觉视口

2.2.1 视图视口(visual viewport)

视图视口是手持设备物理屏幕的可视区域。


500

视觉视口是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height

2.2.2 布局视口(layout viewport)

布局视口:在移动端视口与移动端浏览器屏幕宽度不再相关联,可以单独设置它的宽高(主要是宽),这个视口就是HTML页面布局的区域,并且可以通过viewport meta标签控制。

497

布局视口不会受到缩放的影响,缩放不会导致页面重排渲染,对于移动端宝贵的性能来说非常重要。

layout viewport布局视口的宽度可以通过js的document.documentElement.clientWidth获取。

各个浏览器默认的布局视口宽度:

653

2.2.3 meta标签控制布局视口的宽度

meta标签设置布局视口的语法:
<meta name="viewport" content="name1=value1,name2=value2">

Name Value Description
width 正整数或device-width 设置布局视口的宽度,单位为像素
height 正整数或device-height 定义布局视口的高度,单位为像素(未实行)
initial-scale [0.0-10.0] 定义初始页面(布局视口)缩放值
minimum-scale [0.0-10.0] 定义用户缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义用户放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes

width是设置布局视口的宽度。如果设置iphone5s具体的width值为:320。

<meta name="viewport" content="width=320">
319

如果只是设置viewport的width属性时,iphone的浏览器自动将页面进行缩放到恰好放下页面而不出现滚动条,所以此时:visual viewport == layourt viewport。

上例中:就像把屏幕分成320份。如果设置一个元素为100px*100px,看起来就是屏幕的100/320

如果布局视口的宽度=device-width(设备宽度,也就是:物理像素/dpr)时,此时页面100%的宽度正好能在视觉视口中完全显示,不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致,此时的布局视口的状态我们就称为理想视口(ideal viewport)

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>理想视口</title>
  <style>
    html, body, div {
      padding: 0;
      margin: 0;
    }
    .box {
      width: 100%;
      height: 100px;
      background-color: #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>
</html>

2.2.4 理想视口(ideal viewport)

所谓的理想视口是:
第一,不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;
第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理。

理想视口的宽度一般可以通过以下公式计算:
理想视口的宽度 = 设备像素 / dpr

也就是当布局视口的宽度 等于 设备独立像素的宽度时就是理想视口。

简单的指定的方法:

<!--这一行代码告诉浏览器,布局视口的宽度应该与理想视口的宽度一致-->
 <meta name="viewport" content="width=device-width">
或者
 <meta name="viewport" content="initial-scale=1">

2.2.4 meta标签控制布局视口的缩放

 <meta name="viewport" content="initial-scale=1">

为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢?

这个比值到底是谁呢?这个值是确定整体网页缩放的比例。

缩放比 = 理想视口的宽度 / 视觉视口的宽度

也就是说当视觉视口的宽度 和 理想视口的宽度相等时,则就是1。因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度,所以此时:设备的布局视口==视觉视口==理想视口。

看一图就明了:

普通屏幕 两倍屏
244
244
594

视觉视口:当页面手动放大的时候,用户可以看到的网页内容减少,视觉视口的尺寸变小。反之,同理不赘述。

默认的缩放(initial-scale)值设置后,浏览器会根据理想视口计算出视觉视口,并设置布局视口==视觉视口。

但是如果width和initial-scale都设置的时候,浏览器会取两个值较大的,所以可以通过width设置一个最小的布局视口宽度。

2.3 viewport的其他设置

  • maximum-scale
    在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。

  • maximum-scale用于指定用户能够放大的比例。

举个例子来讲:
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的5倍。

  • minimum-scale
    类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。

通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。

  • user-scalable
    如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。

使用方法如下:
<meta name="viewport" content="user-scalable=no" />


下一节预告:

移动端的适配方案

联系老马

对应视频地址:https://qtxh.ke.qq.com/
老马qq: 515154084
老马微信:请扫码

120

感谢您对老马的支持

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24794 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17989 0
H5移动前端开发常用高能css3汇总
1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强  html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webki...
795 0
第121天:移动端开发基本知识
1、HTML5文档结构 注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。 1 DOCTYPE html> 2 3 4 5 页面标题 6 7 8 9 10 2、浏览器兼容模式 如果网页在IE中打开,必须用最新的引擎渲...
1005 0
第133天:移动端开发的一些总结
1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示?iphone5分辨率640*1136 逻辑像素与物理像素的关系px逻辑像素:浏览器使用的抽象单位dp,pt物理像素:设备无关像素dpr:设备像素缩放比计算公式:1px = (dpr)^2 * dpiphone5的...
1162 0
利用XAMPP搭建PHP开发环境,解决443端口被占用
为了方便,作为学习使用的PHP环境,我们可以直接使用Apache+mysql+php集成开发环境。这样的集成软件有appserv和xampp,这里我们以xampp为例。 首先下载xampp软件,下载地址:https://www.apachefriends.org/zh_cn/index.html 根据相应的平台下载即可,我下的是XAMPP for Windows。
1162 0
+关注
aicoder
资深全栈开发工程师,曾任职金和软件等知名公司。对Web前端全栈开发技术、PHP、Java、DotNet、HTML5、数据库集群等有深入研究。曾参与大型分布式高并发互联网项目设计开发等工作,对于分布式应用架构设计、系统优化等经验丰富
90
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载