viewport视口的概念

概念详见 MDN，我摘出来对比了下，如下图：

总结：

viewport就是当前窗口的可视部分
Visual Viewport 视觉视口就是视口viewport中的可见部分
- 比如在mobile浏览器中，输入时，弹出的键盘，会让 Visual Viewport变小
- 而在该情况下， Layout viewport布局视口是不变的
- 这就是 Visual Viewport视口有时会比 layout viewport视口小的原因
Layout viewport 布局视口，就是网页布局的视口

只要记住，在手机浏览器中输入内容时弹出键盘，这是Visual Viewport高度变小了，而Layout viewport布局视口没变，概念就很容易理解了。用例子来理解概念。

参考：

https://developer.mozilla.org/en-US/docs/Glossary/Viewport

https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport

https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport

viewport视口的概念相关推荐

viewport 视口
视口的概念视口,英语全称 viewport,指的是设备的屏幕上能用来显示我们的网页的那一块区域,再具体一点,就是浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域. 在早 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询...
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"><head><meta ...
viewport视口
viewport视口每次在写代码时,都会用vscode生成html代码时,都会有一句 <meta name="viewport" content="width=d ...
移动端 viewport视口与meta
一.viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分 ...
OPENGL中的glViewport
OPENGL中有一个Viewport视口的概念,它可以简单理解成,当前你创立的窗口中,要显示绘制的区域(暂且这么理解). glViewport(int x,int y,int w,int h)函数有4 ...
css响应式页面实现
响应式页面概念部分 1.响应式页面的由来在很久很久以前,我们做的网页只是为了PC端的观看.使用,直到2000年,2.5G手机的出现,人们可以通过手机来访问网络,使得服务商们纷纷做了另一套网页为手机 ...
浅谈移动端中的视口（viewport）
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...
移动web基础：视口(viewport)，流式布局 JDM京东移动端开发
目标能够理解视口的概念并进行视口的设置能够说出流式布局的基本布局特征能够使用 2倍图进行页面开发能够实现京东首页的头部布局移动web基础移动端调试问题模拟器调试真机调试:使用手机进 ...

viewport视口的概念

viewport视口的概念

viewport视口的概念相关推荐

最新文章

热门文章