移动端适配之二:visual viewport、layout viewport和ideal viewport介绍
上一篇博文,可算把像素这个东西讲清楚了。在这篇博文里面,将继续介绍viewport相关的内容。
很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下,三个viewport主要是相对于移动端而言的。
visual viewport
这个是浏览器给我们用的、能真正用来显示网页内容的区域,可以通过下面的js命令获取:
window.innerWidth
window.innerHeight
正如上篇博客所说的,前端里面能获取到的像素基本上都是CSS像素,所以这个的单位也是CSS像素。对于iPhone X,浏览器全屏状态下,其window.innerWidth
的值为375。
上篇博客中还提到screen.width
和screen.height
,主要是用来获取整个屏幕的大小的,而window.innerWidth
和window.innerHeight
只是获取浏览器可用显示区域的大小,也就是浏览器中间负责显示的部分。当浏览器全屏时,要去掉状态栏、标签栏、任务栏等区域,当浏览器非全屏时,其值更小。由于在移动端,浏览器一般都是全屏的,所以大多数情况下screen.width
与window.innerWidth
的值相等,也有的博客中说用screen.width
和screen.height
来获取visual viewport的大小,就是这个原因。
visual viewport是我们可以直观看到的,不严谨的说,就是差不多等于手机屏幕的大小,偏向于一个物理概念。
layout viewport
网页最早是出现在电脑上的,上一篇博客中提到,电脑的物理像素可能比手机还要低,但是电脑的设备无关像素(或者说是分辨率吧,更严谨一些)是明显大于手机的设备无关像素的,毕竟电脑的屏幕尺寸远比手机大啊。那些在电脑上的网页,如果没有经过专门的优化,直接搬到手机上看,那么问题就来了,网页会被挤得变形,相信这种问题大家都遇到过。所以呢,手机厂商为了解决这个问题,设置了一个layout viewport。
这是一个虚拟的窗口,其大小比手机屏幕大,加载网页时,直接把HTML渲染在这个虚拟的窗口中,这样就不会样式错乱了。在查看的时候,毕竟手机的visual viewport小啊,那就只能通过滚动条来看了。
做个比喻,layout viewport就是一张大白纸,HTML的内容就写在这个大白纸上,visual viewport就是一个放大镜,上下左右移动,可以显示其中的一部分。
Layout viewport的大小可以通过document.documentElement.clientWidth
和document.document.clientHeight
,实际使用中可能会有一些兼容问题,这跟DOCTYPE声明有关。不同浏览器的layout viewport大小不同,常见的有980px、1024px。
ideal viewport
Layout viewport是为了能将电脑上的网页正确的显示到手机上。当浏览器拿到一个网页时,首先会渲染到这个layout viewport里面。可是现在有很多网页会针对手机做专门的设计,比如现在的一些H5活动页,设计的尺寸就是在手机上看的。此时如果还是把网页渲染到这个大的layout viewport上,实在是有点不合适了。所以,还应该有个ideal viewport,这个ideal viewport应该与手机屏幕大小的相同,确切来说,等于visual viewport的大小。把页面渲染到这个ideal viewport里面,就能在visual viewport中完美显示。
小结
根据我的理解小结一下:layout viewport和ideal viewport都是用来渲染页面,layout viewport较大,用来渲染电脑上的页面,ideal viewport较小,用来渲染专门针对手机设计的页面;而visual viewport是用来查看layout viewport和ideal viewport的,是用来查看渲染的结果的。visual viewport是很具体的,而layout viewport和ideal viewport是比较抽象的。某种程度来说,layout viewport和ideal viewport可以理解成是两种尺寸,承载页面渲染的盒子,可以设置成layout viewport的尺寸,也可以设置成ideal viewport的尺寸,而且在默认情况下是layout viewport的尺寸。如果我们设置HTML中body为width:100%,那么这个body的实际宽度,将由这个盒子的宽度决定。在下一篇博文中,将介绍如何用meta标签来设置viewport,也就是设置这个承载HTML页面渲染的盒子的尺寸,从而达到最佳的显示效果。
来源:https://segmentfault.com/a/1190000017542232
移动端适配之二:visual viewport、layout viewport和ideal viewport介绍的更多相关文章
- 移动端适配(rem & viewport)--移动端开发整理笔记(四)
移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸 我们知道,在不同的手机设备,分辨率大小是 ...
- Web移动端适配总结
移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...
- Css-移动端适配总结
前言 工作以后,大部分的业务工作都是基于移动端H5的,开发过程中学习了很多东西,遇到过许多问题,诸如rem\em\css px\device px等,本文纯属个人的归纳总结,如有问题,请指出亲喷~ P ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- viewport移动端适配,读文笔记
文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...
- 浅谈web移动端适配问题
一.布局方案 目前在解决移动端页面适配问题方案选择上,目前用得比较多是百分比布局,弹性布局flex,rem布局,本文将重点跟大家探讨rem布局. 二.viewport 在介绍rem布局之前,首先跟大家 ...
- 浅谈移动端适配-rem
对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
随机推荐
- error C2440 “static_cast” 无法从“void (__thiscall C* )(void)...
1.VC6中,说可以把函数在头文件中定义为:afx_msg void OnProgress()这样 但是在VS2005及以上,要求很严格,必须函数返回值为LRESULT类型,所以在VS2005及以上, ...
- golang Linux下编译环境搭建
1.下载golang1.4和1.10源码(1.4以后的版本都用1.4go编译安装,所以先安装1.4) 2.解压后我的目录结构是: /opt/xxx/golang |-------gopath ...
- windows和ubuntn互传文件
Windows和linux(ubuntu)互传文件简便快捷的方法 现在很多开发和测试的工作环境都是Linux,但测试后期报告的处理一般都是在Windows下完成的,所以需要把结果拿到Windows下. ...
- JavaSE_08_Collections常用功能
1.1 常用功能 java.utils.Collections是集合工具类,用来对集合进行操作.部分方法如下: public static <T> boolean addAll(Colle ...
- 转载 Python 安装setuptools和pip工具操作方法(必看)
本文章转载自 脚本之家 http://www.jb51.net 感谢! setuptools模块和pip模块是python进行第三方库扩展的极重要工具,例如我们在需要安装一些爬虫或者数据分析的包时就 ...
- mac上python3.x安装 图文详解
mac安装brew报错及解决办法 https://blog.csdn.net/zdp072/article/details/82563320 更改脚本中的资源链接,替换成中国科学技术大学的镜像 htt ...
- JavaScript中this的指向(转载)
转载自:http://www.cnblogs.com/dongcanliang/p/7054176.html 前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现 ...
- 20190818 [ B ]-½
请看到这个蒟蒻博客的人注意一下. 这是简单的[ B ]场考试,如果需要[ A ]场题解请去神犇们的blog. [ B ]场不需要题解,恩? 太蒟蒻了QAQ 考试过程: 怀着我是蒟蒻我怕谁的心情. 首先 ...
- 前端js框架引入管理bundle.js
最先在ionic中看到bundle.js,,,然而它不是一个框架
- CSS利用filter/opacity实现背景透明
先看看众所周知的解决方案 如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=);/*IE浏览器*/ op ...