前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第119天:移动端:CSS像素、屏幕像素和视口的关系

第119天:移动端:CSS像素、屏幕像素和视口的关系

作者头像
半指温柔乐
发布2018-09-11 10:22:45
1.7K0
发布2018-09-11 10:22:45
举报
文章被收录于专栏:前端知识分享

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。

一、视口

1、layout viewport(布局视口)

  一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

2、visual viewport(视觉视口)和物理像素

visual viewport(视觉视口)物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素:

  • iPhone5 :640 * 1136
  • iPhone6:750 * 1334
  • iPhone6 Plus:1242 * 2208

3、ideal viewport(理想视口)和 dip (设备逻辑像素)

ideal viewport(理想视口)通常是我们说的屏幕分辨率。

dip (设备逻辑像素)跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina (视网膜)屏显示器硬件像素是:2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候,ideal viewport(理想视口)的宽度值是1920像素, 那么 dip 的宽度值就是1920。设备像素比是1.5(2880/1920)。设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是 ideal viewport(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:

  1. iPhone5 :分辨率 320 * 568,物理像素 640 * 1136,@2x
  2. iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x
  3. iPhone6 Plus :分辨率 414 *  736,物理像素1242 * 2208,@3x,(注意,实际显示图像等比降低至1080×1920)

二、CSS像素

CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。CSS像素dip比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个 dip(设备逻辑像素) 。

1、使用viewport元标签控制布局

首先看一下viewport元标签极其属性:

代码语言:javascript
复制
1 html 代码:
2 <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

这里是每个属性的详细介绍:

属性名

取值

描述

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

(1)width

width属性被用来控制layout viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,例如:

代码语言:javascript
复制
1 html 代码:
2 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width=device-width 也就是将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dip 的宽度值是相等的。

(2)height

与width类似,但实际上却不常用。

(3)initial-scale

initial-scale用于指定页面的初始缩放比例:

代码语言:javascript
复制
1 html 代码:
2 <meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度,initial-scale=1.5 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度的1.5倍。

(4)maximum-scale

maximum-scale用于指定用户能够放大的最大比例,例如

代码语言:javascript
复制
1 html 代码:
2 <meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。

(5)minimum-scale

似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。

(6)user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes,可被缩放,你也可以将该值设置为no,表示不允许用户缩放网页。例如:

代码语言:javascript
复制
1 html 代码:
2 <meta name="viewport" content="user-scalable=no" />

三、屏幕像素

  1、px(pixels):物理像素,硬件像素,设备像素

  2、dp,dip(deveice independent pixels):逻辑像素、设备无关像素、CSS像素

  3、pt(point):1/72英寸

  4、dpr(devicePixelRatio): 设备像素缩放比,即 1dp的长度相当于几个px的长度

  5、ppi,dpi:像素密度(像素每英寸),斜向一英寸里的物理像素数量

  6、em: 相对于父元素的font-size的相对单位。

  7、rem: 相对于根元素的font-size的相对单位。

  8、vw: 1% 布局视口宽度

  9、vh: 1% 布局视口高度

  10、分辨率:横向物理像素数 * 纵向物理像素数

iPhone5为例

物理像素:640 * 1136。屏幕尺寸:4英寸。对角线物理像素数:开根号(1136 * 1136 + 604 * 640) = 1304。ppi = 1304 / 4 = 326。默认dpr:2。逻辑像素:568 * 320

ppi与默认dpr对应关系:(规律:每英寸里面的点越多,让越多的点来充当一个px)

          ppi   默认dpr

ldpi   120   0.75

mdpi   160   1.0

hdpi   240   1.5

xhdpi  320   2.0

Retina屏(视网膜屏): ppi 大于320

设备尺寸列表 https://material.io/devices/

四、视口与缩放

布局宽度:布局视口的逻辑像素的数量

屏幕宽度屏幕的逻辑像素的数量(视觉视口、可见视口、虚拟视口)

逻辑宽度逻辑像素的数量

视觉宽度横向长度

chrome 实验结论:桌面浏览器设置viewport无效,但可以手动缩放。移动浏览器设置viewport有效,但也能手动缩放。

桌面浏览器以屏幕宽度进行布局,手动缩放,相当于改变dpr,以缩小为例:

  1、缩小后,dpr变小,viewport的视觉宽度不变,逻辑宽度变大

  2、缩小后,百分比宽度的元素,百分比仍然生效,逻辑宽度和视觉宽度跟着父元素变化。默认情况下,<html>是viewport的 100%,因此<html>的视觉宽度不变,逻辑宽度变大。

  3、缩小后,固定宽度的元素,逻辑宽度不变,视觉宽度缩小。

  4、文字无法无限缩小,缩小到一定程度后继续缩小,视觉宽度不变,dpr变小,逻辑宽度变大。

总结:缩小,dpr变小;元素逻辑宽度不变,视觉宽度变小;视觉宽度不能变小的(viewport,百分比宽度的元素,小字),视觉宽度不变,逻辑宽度变大。

移动浏览器viewport设置initial-scale缩放。以缩小为例

  1、viewport的逻辑宽度和视觉宽度初始都为width逻辑宽度不变视觉宽度initial-scale缩小;视觉宽度缩小到跟屏幕一样宽时,不再缩小,变成逻辑宽度变大视觉宽度不变

  2、百分比宽度的元素,变化规律跟viewport一样

  3、固定宽度的元素,逻辑宽度不变,视觉宽度缩小。

  4、无法缩小到文字不能再缩小的程度

总结:viewport视觉宽度缩小到屏幕宽度之前,viewport、百分比宽度元素、固定宽度元素,都是逻辑宽度不变,视觉宽度以同等比例缩小

移动浏览器手动缩放

不分viewport、百分比宽度元素、固定宽度元素,全都是视觉宽度缩放,逻辑宽度不变

viewport 设置

<meta name="viewport" content="width=deveice-width,initial-scale=1,

           mininum-scale=,maximum-scale=,user-scalable=no">

  width:布局宽度,相当一部分手机浏览器默认为 980px

  deveice-width:屏幕宽度

  initial-scale:初始缩放比例

  mininum-scale:最小缩放比例

  maximum-scale:最大缩放比例

  user-scalable:是否允许用户缩放

情况一:未设置<meta name="viewport">

那么布局宽度width=980px,初始缩放initial-scale为自动(缩放到屏幕大小)

情况二:viewport只设置width,不设置initial-scale

那么initial-scale为自动

情况三:viewport只设置initial-scale=1,不设置width

那么width=device-width

情况四:viewport只设置initial-scale !=1,不设置width

那么Android width=980px,IOS width=device-width

五、视口与JS

screen.width   屏幕的逻辑像素的数量

window.innerWidth  浏览器的逻辑像素的数量(包含滚动条占据的宽度)

document.documentElement.clientWidth   viewport的逻辑像素的数量

document.documentElement.offsetWidth  根元素<html>的逻辑像素的数量

window.pageX/YOffset  布局视口相对于可见视口的位移

window.devicePixelRatio  屏幕dpr

orientationchange  屏幕转向事件

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、视口
  • 1、layout viewport(布局视口)
  • 2、visual viewport(视觉视口)和物理像素
  • 3、ideal viewport(理想视口)和 dip (设备逻辑像素)
  • 二、CSS像素
    • 1、使用viewport元标签控制布局
      • (1)width
      • (2)height
      • (3)initial-scale
      • (4)maximum-scale
      • (5)minimum-scale
      • (6)user-scalable
  • 三、屏幕像素
  • 四、视口与缩放
  • 五、视口与JS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档