web页面中的布局位置到底是什么

首页 / 常见问题 / 低代码开发 / web页面中的布局位置到底是什么
作者:web开发平台 发布时间:24-12-31 13:56 浏览量:9349
logo
织信企业级低代码开发平台
提供表单、流程、仪表盘、API等功能,非IT用户可通过设计表单来收集数据,设计流程来进行业务协作,使用仪表盘来进行数据分析与展示,IT用户可通过API集成第三方系统平台数据。
免费试用

viewpor是浏览器视口,代表浏览器的可视区域,也就是浏览器中用来显示网页的那部分区域。在桌面电脑上,由外到内分为显示器窗口、浏览器窗口、浏览器视口 (viewport)、元素。

一、web页面中的布局位置

viewport 是浏览器视口,代表浏览器的可视区域,也就是浏览器中用来显示网页的那部分区域。在桌面电脑上,由外到内分为显示器窗口、浏览器窗口、浏览器视口 (viewport)、 元素。

显示器窗口

显示器窗口就是你的显示器屏幕的可见区域。显示器的分辨率,描述的是显示器窗口的设备像素,又叫做物理像素,通过 screen.width 来表示水平方向的物理像素,screen.height 来表示垂直方向的物理像素。比如一台分辨率为 1920 * 1080 的显示器,它的 screen.width 为 1920,screen.height 为 1080。screen.width 和 screen.height 是固定的,不可以改变。

浏览器窗口

浏览器窗口就是浏览器中用来显示网页的可见区域,不包括工具栏的部分,但是包括水平滚动条和垂直滚动条 (只包括滚动条本身所占的像素,不包括已滚动的网页部分)。

浏览器视口

viewport 就是浏览器视口,浏览器视口和浏览器窗口类似,只不过不包括水平滚动条和垂直滚动条。如果网页里没有滚动条,则浏览器视口和浏览器窗口的大小一样。通过 document.documentElement.clientWidth 来表示浏览器视口水平方向能够显示的 CSS 像素数,document.documentElement.clientHeight 来表示浏览器视口垂直方向能够显示的 CSS 像素数。如果没有滚动条,document.documentElement.clientWidth 和 window.innerWidth 相等。如果有滚动条,window.innerWidth = document.documentElement.clientWidth + 垂直滚动条所占的宽度。document.documentElement.clientWidth 和 document.documentElement.clientHeight 是可变的,通过拉伸或者缩放浏览器可以改变。

元素

HTML 文档中, 元素是文档根元素,通过 document.documentElement 来表示 元素。 元素所占的 CSS 宽度和高度,用 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 来显示。

缩放浏览器

通过百分比缩放浏览器的时候,并没有改变浏览器的物理尺寸,但是改变了 CSS 像素的物理尺寸。viewport 所能够展示的 CSS 像素数也会发生改变,因此 document.documentElement.clientWidth 和 window.innerWidth 就会改变。

比如我们把显示器放大到 200%,网页中的元素尺寸都放大一倍,但是元素的 CSS 像素值不会改变。比如某个元素的 width: 100px;,不管是浏览器放大显示还是缩小显示,该元素的 CSS 像素是不会变的,永远都是 width: 100px;,变化的是该元素在显示器上所占的物理尺寸。当浏览器放大 200% 显示网页的时候,1px CSS 像素的物理尺寸也会放大一倍。

举例子:

点击浏览器的放大按钮放大到 200% 显示网页的时候,虽然浏览器的物理尺寸没有变化,但是 1px CSS 像素的物理尺寸扩大了一倍,因此浏览器 viewport 能够展示的 CSS 像素数就会缩小一倍。因此不缩放时,viewport 为 1000px,放大 200% 之后,viewport 为 500px,也就是说放大后 viewport 水平方向能够展示的 CSS 像素数为 500px。同理,点击浏览器的缩小按钮缩小到 50% 显示网页的时候,viewport 为 2000px,也就是说缩小后 viewport 水平方向能够展示的 CSS 像素数为 4000px。

延伸阅读:

二、网页可见区域是什么

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的高);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

对块级元素来说,offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框

最后建议,企业在引入信息化系统初期,切记要合理有效地运用好工具,这样一来不仅可以让公司业务高效地运行,还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业,可以采用我们公司自研的企业级低代码平台织信Informat。 织信平台基于数据模型优先的设计理念,提供大量标准化的组件,内置AI助手、组件设计器、自动化(图形化编程)、脚本、工作流引擎(BPMN2.0)、自定义API、表单设计器、权限、仪表盘等功能,能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景,全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们微信:Informat_5 处理,核实后本网站将在24小时内删除。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系邮箱:hopper@cornerstone365.cn 处理,核实后本网站将在24小时内删除。

最近更新

Vue 3.0低代码开发平台:《Vue 3.0低代码平台》
04-01 11:50
低代码数字化平台服务商:《低代码数字化服务商》
04-01 11:50
低代码国内公司:《国内低代码公司推荐》
04-01 11:50
低代码哪个好:《优质低代码平台推荐》
04-01 11:50
Vue 3搭建低代码方案:《Vue 3低代码搭建方案》
04-01 11:50
大屏低代码开发:《大屏低代码开发实践》
04-01 11:50
工业低代码开发引擎:《工业低代码开发引擎》
04-01 11:50
低代码开发平台推荐:《低代码开发平台推荐》
04-01 11:50
低代码定制开发平台:《低代码定制开发平台》
04-01 11:50

立即开启你的数字化管理

用心为每一位用户提供专业的数字化解决方案及业务咨询

  • 深圳市基石协作科技有限公司
  • 地址:深圳市南山区科技中一路大族激光科技中心909室
  • 座机:400-185-5850
  • 手机:137-1379-6908
  • 邮箱:sales@cornerstone365.cn
  • 微信公众号二维码

© copyright 2019-2024. 织信INFORMAT 深圳市基石协作科技有限公司 版权所有 | 粤ICP备15078182号

前往Gitee仓库
微信公众号二维码
咨询织信数字化顾问获取最新资料
数字化咨询热线
400-185-5850
申请预约演示
立即与行业专家交流