viewport，web开发 viewport是什么意思
本篇文章给大家谈谈viewport，以及web开发 viewport是什么意思对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
web开发 viewport是什么意思
viewport的概念
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。
使用
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。
移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
Viewport 视窗预览 参数详解
Force Display：强制显示（模拟时候，默认只有选中fumefx模拟框才会显示体素，勾选强制显示后则会一直显示）
GPU Viewport Preview：(GPU视窗预览)效果如下图
EnableQuality：预览质量（3和5显示基本一致）
Hide Grid：不显示模拟框
Shadows：预览灯光阴影显示
Object Occlusion：对象遮挡（显示正确的物体与流体的遮挡关系，默认不启用，会增加模拟负担）
Auto Switch Viewport：自动切换视图（GPU视图显示只有在透视图才会显示，当你有两个透视图，只有一个会启动GPU预览，来回切换时，自动将该视图切换到GPU视图显示）示例如下：
Gamma：显示视图的伽马值
Frame Number：帧数
Cache File Name：缓存文件名字
FumeFX Node Name：FumeFX模拟框名字
Grid Dimensions：网格尺寸
Loaded Channels:加载通道
Enable:关闭体素显示（所有视窗）
Reduce：降级（数值越大，视窗显示的体素越少）
Threshold Scale：阈值
（调节视图显示的通道，需要在体素显示模式下才能观察到，GPU视窗不行。有些通道只有在模拟时才能观察到
这些通道只是为了便于模拟时候观察，不需要深究。）
Scale Multiplier（当模拟时调节力场需要观察时候可以放大力的显示，也只是方便我们观察）
前端-设备像素比和viewport
设备像素（device pixels）也叫做设备物理像素是一个具体可测量的物理单位。
CSS像素是与设备无关的像素，这一类像素也叫做独立设备像素（Device-independent pixel），它们是应用程序的抽象单位。当应用程序运行时，底层图形系统会按照一定的比例（设备物理像素和设备独立像素比）将应用程序的抽象像素转换为适用于设备的物理像素。
设备物理像素和设备独立像素的比例，设备物理像素，设备独立像素。
将 CSS布局中的 px是相对于物理像素的单位，在大多数浏览器中，通过 window.devicePixelRatio可以得到物理像素与它的比率。比如在 iPhone6上分辨率750x1334，它的 window.devicePixelRatio=2所以它屏幕宽度为375px，共有750个物理像素，即1px代表两个物理像素。
下面是 window.devicePixelRatio浏览器的兼容性。
浏览器中的**viewport**和<html>区域相同，可以看作是<html>上层的包含块。在大多数移动设备中，浏览器是全屏的，所以 viewport是整个屏幕的大小。
视口中经常需要区分布局视口（layout viewport），视觉视口（visual viewport）和理想视口（ideal viewport）
布局视口可以看作是CSS布局时的画布，视觉视口是当前显示的页面区域，理想视口是页面在设备最佳的呈现。
理想的呈现方式是终极目标，可以使用户体验大大提升，特别是在非PC设备上，理想的状态意味着：
如果布局视口宽度≠视觉视口宽度，出现的情况就是内容过宽，用户可能就需要缩放来查看内容，缩小后，看起来费劲，放大后需要左右滑动查看。
移动浏览器和桌面浏览器最大的区别是屏幕宽度小很多，对于很多针对PC设计的网页会因为宽度变窄而显示错乱。
因为移动设备浏览器认为自己必须能让所有的网站都正常显示，这包括了很多PC端网站，所以各移动浏览器厂商统一将设备默认布局视口设置为 980px。
比如在宽 375px的 iphone6上显示一个宽为 980px的页面，大多数浏览器为了让页面显示全而缩小页面。
我们可以使用 meta viewport让浏览器布局视区等于屏幕宽度也就是375px，这样显示出来就是理想效果。
下面这个 meta是我们在开发移动设备的网站最常用的。
该 meta标签的作用是让当前布局视口的宽度等于设备的宽度，同时不允许用户手动缩放。
meta viewport标签首先是由苹果公司在其 safari浏览器中引入的，目的就是解决移动设备的 viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对 meta viewport的支持，事实也证明这个东西还是非常有用的。
下面是一些设备的分辨率和视口大小：
OpenGL之Viewport
1.1窗口(Screen)
窗口其实就是屏幕，如下图1中红色圈中黑色背景的部分。所有的场景最终都是要被光栅化乘显示器上的图像，屏幕是所有场景（2D、3D等）的最终输出目的地。一个screen可以显示多个视口中的内容；
1.2视口(Viewport)
视口就是窗口中用来显示图形的一块矩形区域，它可以和窗口等大，也可以比窗口大或者小,如图1中蓝色标示的绿色背景的区域。它具有两个意义:
•定义了视镜体中的景物要被绘制到一张什么尺寸的画布之上；
•定义了画布在屏幕的什么区域；
显然，如果视景体的投影平面定义的宽高比和视口所定义的宽高比不相同的话，那么将视景体中的物体绘制到画布上的时候会进行拉伸或者压缩；而当视景体投影平面的宽高比和视口所定义的宽高比一致的时候，图像将会不进行任何缩放绘制到视口所定义的画布之上。
在实际应用中，一个窗口中会绘制多个3D场景，这个通过定义多个视口，绘制多个图像，然后贴在屏幕的不同区域即可。比如图中黄色笔圈中的区域，在画布中定于两个不同的viewport1（0,0;w/2,y）和 viewport2（0,w/2;w/2,y）；
1.4视镜体(View Frustum)
视景体(View Volume)定义了我们能够通过虚拟的3D摄像机所能看到的场景。在一个3D场景中站立中，需要摄像机的摆放位置和视野来定义我们所能够看到的东西，而这个视野就是通过视景体来定义的。在3D中，一般可以通过以下两种方式来定义视景体：
通过前面的介绍，我们大致的了解了这三个不同东西的概念。从中我们可以知道，通过定义投影矩阵，我们实际上是在虚拟的3D空间中，创建了一个视野，也就是视景体。在接着，我们通过定义视口，来描述视景体中的内容如何映射到一个虚拟的画布之上，并且这个画布最终将显示在屏幕上的什么位置。当所有的这些都设置完毕，我们绘制完毕场景之后，就能够通过硬件在我们的显示器屏幕上看到最终的画面。更理论的表述就是，通过定义投影矩阵，将3D场景投影到一个投影平面之上。通过定义视口，我们将投影平面上的内容映射到这个视口中去，并且填满它，同时根据定义视口是给定的屏幕坐标的位置，将这个视口中的图像映射到窗口的指定位置之上，最终我们就看到了图像。
glViewport是OpenGL中的一个函数。计算机图形学中，在屏幕上打开窗口的任务是由窗口系统，而不是OpenGL负责的。glViewport在默认情况下，视口被设置为占据打开窗口的整个像素矩形，如图1，窗口大小和设置视口大小相同，所以为了选择一个更小的绘图区域，就可以用glViewport函数来实现这一变换，在窗口中定义一个像素矩形，最终将图像映射到这个矩形中。例如可以对窗口区域进行划分，在同一个窗口中显示分割屏幕的效果，以显示多个视图。
viewport的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于web开发 viewport是什么意思、viewport的信息别忘了在本站进行查找哦。