确定页面视口大小

最新推荐文章于 2024-10-24 16:57:27 发布
原创 最新推荐文章于 2024-10-24 16:57:27 发布 · 229 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

这段代码用于获取浏览器窗口的高度和宽度，考虑了不同浏览器的兼容性问题。通过检查变量类型，分别针对CSS1Compat模式和普通模式来获取document的clientWidth和clientHeight，确保在各种环境下都能正确获取页面尺寸。

let pageWidth = window.innerHeight,

    pageHeight = window.innerHeight;

    if(typeof pageWidth !== "number") {

        if(document.compatMode =="CSS1Compact"){

            pageWidth = document.documentElement.clientWidth;

            pageHeight = document.documentElement.clientHeight;

        } else {

            pageWidth = document.body.clientWidth;

            pageHeight =document.body.clientHeight;

        }

    }

html文件怎么生产vm页面,认识视口单位vm、vh在网页中的排版应用
weixin_42513512的博客
06-03 708
在之前的两篇关于构建模块化的文章中，谈到了 rem & em 和 响应式排版，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。视口单位是什么？在 CSS 规范中，...
cad视口缩放区域怎么使用_CAD布局怎么用?简单讲解CAD布局用法和基本操作
weixin_36014846的博客
01-26 1726
CAD布局怎么用CAD布局怎么用?我们在使用CAD软件时候，布局空间出图比模型空间的好处在于，当需要调整不同比例时，只需通过调整视口比例，而不需要缩放图框，并且可以反复调用相同的模型空间内的图形。下面以中望CAD为例，来简单看下在CAD中如何来通过布局空间出图。CAD布局怎么用?首先为了绘图习惯我们可以对布局空间做一些基本设置，进入工具——选项——显示中。将显示可打印区域、显示图纸背景去掉，在颜色...
js 获取页面宽高
DAQIQIU的专栏
08-22 276
var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != “number”){ if (document.compatMode == “CSS1Compat”){ pageWidth = document.documentElem...
BOM:窗口位置、页面视口大小、window.open
xujiezi的专栏
04-08 2325
获取窗口位置： // 兼容所有浏览器的写法 var leftPos = (typeof window.screenLeft === "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop === "number") ? window.screenTop : window.scre
客户端、窗口、视口、DOM的大小和位置
weixin_41154070的博客
02-27 1842
window innerWidth: 以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。 innerHeight: 浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。 outWidth: 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框 outHeight: 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chr
查询窗口滚动条的位置和视口尺寸
樊小书生
05-26 914
元素的位置是以像素来度量的，有两个不同的点作为坐标系的原点： 文档的左上角 在其中显示文档的视口的左上角 在顶级窗口和标签页中，视口只是实际显示文档内容的浏览器的一部分：他不包括浏览器的“外壳”（如菜单、工具栏和标签页）。针对框架页中显示的文档，视口是定义了框架页的<iframe>元素。 无论在何种情况下，当讨论元素的位置时，必须弄清楚所...
web开发学习总结之移动端浏览器视口大小
老王的博客
12-08 1325
1 PPI 首先明确一点，PPI数值的大小与屏幕（电脑或手机）分辨率大小、屏幕（电脑或手机）视口大小没有任何关系。 PPI全称是Pixal Per Inch 每平方英寸像素的个数。 手机的PPI很大，所以屏幕小但是像素多，所以颗粒感小(视网膜屏)，让人看不到屏幕上的像素点。 2 浏览器视口大小 2.1 电脑的浏览器视口宽度 win10系统有点准备工作。就是现在设置->显示页面，把“更改文本、...
视口大小的版式
cunque0995的博客
06-27 258
CSS中有一些值，用于根据视口（浏览器窗口的大小）调整大小。 它们被称为视口单位 ，其中有许多功能稍有不同（都是有用的）。 一单位是视口轴之一的1％。 这些对于响应式设计很有用，也就是说，利用可利用的空间来设计在不同屏幕尺寸下看起来都不错的网站。 视口单位可以做很多事情，但让我们特别看一看： 印刷术 。 值得一看的是我们最近发布的《 简化的流体印刷术》，以实用，基于视口的固定类型调整大...
使用jQuery获取视口大小
p15097962069的博客
07-05 1208
How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page
页面中元素大小的确定
kalinara的博客
07-06 474
页面上的元素大小
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
10-26
这些功能对于动态调整页面布局、实现滚动监听以及确定元素在页面中的确切位置至关重要。本文将详细解释使用纯JavaScript（JS）以及JQuery来实现这些功能的方法，并提供示例代码，帮助读者更好地理解和运用。 一、...
cad布局里如何改视口尺寸.doc
最新发布
07-15
若要调整新建视口的大小以适应图纸背景，需右键点击布局界面最左侧的竖向菜单栏空白部分，调出“布局”和“视口”菜单选项。点击“布局”选项中的第三个，即“页面设置管理器”，选择当前活动的布局进行修改。进入...
1024. 视频拼接
热门推荐
10-24 4万+
你将会获得一系列视频片段，这些片段来自于一项持续时长为 T 秒的体育赛事。这些片段可能有所重叠，也可能长度不一。 视频片段 clips[i] 都用区间进行表示：开始于 clips[i][0] 并于 clips[i][1] 结束。我们甚至可以对这些片段自由地再剪辑，例如片段 [0, 7] 可以剪切成 [0, 1] + [1, 3] + [3, 7] 三部分。 我们需要将这些片段进行再剪辑，并将剪辑后的内容拼接成覆盖整个运动过程的片段（[0, T]）。返回所需片段的最小数目，如果无法完成该任务，则返回 -1 。
element-ui 时间组件date-picker 去掉“此刻”二字
10-24 1213
在这个标签内加入popper-class="no-atTheMoment"，这个是官方提供的日期弹出层添加样式的方法，用这个classname做限制，不想显示“此刻”的，就加上这个，想显示的，就去掉它即可。官方文档没有提供去掉这个的属性，网上查了一下，主要是通过给这个标签添加css属性，display：none，来隐藏。用element-ui的时间组件时，想去掉“此刻”二字。
前端技巧：jsonp跨域请求json文件记录以及百度地图的省份和城市坐标在静态服务器上的处理
11-23 1113
1、用jsonp方式请求静态资源服务器上的json文件 首先将json文件用一个回调函数包裹起来，如下： 服务器上的省份坐标json文件：map_coordinate_bd_china_provinces.json bdMapForProvinces({ "北京": { "lng": 116.395645, "lat": 39.929986, "l": 12 }, "上海": { "lng":...
将一个url的参数字符串转化成对象
03-13 628
将一个url的参数字符串转化成对象
freemarker模板当标签内的元素为空报错解决方案
04-27 622
<#if Session['userId']??> <input id="user-id" type="hidden" value="${Session['userId']}"> <#else> <input id="user-id" type="hidden" value=""> </#if>
Array.prototype.slice.call(arguments,0)含义
01-10 354
能将具有length属性的对象转成数组 1、Array是构造函数 2、arguments是类数组对象(缺少很多数组的方法) 3、call让一个对象调用另一个对象的方法。你可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法） 4、 slice从一个数组中切割，返回新的数组，不修改切割的数组 本质就是arguments这个对象...
web笔记：call、apply 以及 bind 的区别和用法
02-24 278
本文转自「干货」细说 call、apply 以及 bind 的区别和用法 它们最主要的作用，是改变 this 的指向。在平时的工作中，除了在写一些基础类，或者公用库方法的时候会用到它们，其他时候 call 和 apply 的应用场景并不多。 b不过，突然遇到的时候，需要想一下才能转过弯来。所以今天，就让我们好好地探究一下，这两个方法的区别以及一些妙用。最后，还会介绍与之用法相似的 bind 的...
html设定页面大小
03-29
首先，我需要明确“页面大小”指的是什么。可能有两种理解：一种是视口尺寸，确保页面适应不同设备的屏幕；另一种是打印时的物理页面尺寸，比如A4或Letter。 根据用户提供的引用，特别是引用[2]和引用[5]，提到了...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值