JS获取电脑分辨率大小和网页大小

最新推荐文章于 2024-12-11 15:16:29 发布
原创 最新推荐文章于 2024-12-11 15:16:29 发布 · 1.3k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#js #html5
本文详细介绍了如何使用JavaScript获取屏幕分辨率、可用工作区尺寸、颜色深度以及设备像素密度等信息，并探讨了如何获取网页的可见区域、内容大小及滚动位置，对于前端开发者理解和优化网页布局至关重要。

一、分辨率

屏幕分辨率的高

window.screen.height

屏幕分辨率的宽

window.screen.width

屏幕可用工作区的高

window.screen.availHeight

屏幕可用工作区的宽

window.screen.availWidth

屏幕设置（位彩色）

window.screen.colorDepth

屏幕设置（像素/英寸）

window.screen.deviceXDPI

二、网页大小

网页可见区域的宽

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
JS获取当前网页大小以及屏幕分辨率等
10-25
主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单，但比较实用，需要的朋友可以参考下
JavaScript方法获取屏幕缩放比例与分辨率
王继伟2021
07-15 1万+
JS（JavaScript）方法获取屏幕缩放比例与分辨率。
JavaScript/JS获取屏幕的分辨率
qq_45735918的博客
10-25 5590
获取屏幕高度。获取屏幕宽度。
JavaScript如何优雅地获取屏幕分辨率
liuhailong2014的博客
04-01 8680
长话短说，网上很多推荐的window.screen.width和window.screen.height其实在屏幕缩放比为1的时候是能获取到屏幕分辨率的，但有些屏幕的屏幕缩放比并不是1，这个时候获取到的并不是真正的屏幕分辨率，开始放大招： 获取屏幕宽度：window.screen.width * window.devicePixelRatio 获取屏幕高度：window.screen.height * window.devicePixelRatio yes，完成！ ...
JS测试显示屏分辨率以及屏幕尺寸
毛兴宇
11-22 2704
如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢？请看下面一段代码： 毛兴宇特效演示_JS测试显示器分辨率 document.write('您的显示器分辨率为:\n' + screen.width + '*' + screen.height + ' pixels'); var ww = document.getElementById("hutia").offsetWidth, w
JS获取屏幕分辨率 及 窗口尺寸
偏执
08-07 2571
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；Document对象的body属性对应HTML文档的标签。event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量。网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域宽：document.body.offsetWidth (包括边线的宽)
js获取电脑和和手机分辨率的方法
weixin_42095178的博客
12-07 1823
document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth);通过Js 来获取所有屏幕分辨率。
如何使网页自适应电脑屏幕分辨率?
热门推荐
Luqing的专栏
07-05 13万+
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。 　　第一种方法：做一个网页解决问题（长了点） 　　如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们
前端屏幕尺寸和分辨率_JS获取当前网页大小以及屏幕分辨率等
weixin_39738667的博客
12-19 1189
效果如下：代码如下：获取当前对象大小以及屏幕分辨率等var s = "";s += " 网页可见区域宽："+ document.body.clientWidth+"";s += " 网页可见区域高："+ document.body.clientHeight+"";s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"";s +...
JS获取屏幕分辨率以及当前对象大小等数据
Micky的博客
03-06 2227
<script type="text/javascript"> function getInfo(){ var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth+"\n"; s += " 网页可见区域高："+ document.body.clientHeight+"\n
js获取浏览器的的所有尺寸数及电脑的分辨率
乐居猫
12-09 2880
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br /> <HTML><br /> <HEAD><br /> <TITLE> New Document </TITLE><br /> <META NAME="Generator" CONTENT="EditPlus"><br /> <META NAME="Author" CONTENT=""><br /> <META NAME="Keywords" CONT
JS判断显示器分辨率
weixin_34281537的博客
08-22 222
&lt;script   LANGUAGE="VBScript"&gt;     function   myscreen     If   screen.width="800"   and   screen.height="600"   Then       alert   "你的显示器的分辨率是:"&amp;screen.width&amp;"*"&amp;scree
获取屏幕分辨率
webe1234的博客
10-30 612
1.获取屏幕的分辨率 CRect rectWind;   this->GetClientRect(rectWind);   int iHeight = rectWind.Height();   int iWidth = rectWind.Width();   2.使对话框全屏显示 //得到显示器大小 2 int cx,cy; 3 cx = GetSy
前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
weixin_39601657的博客
12-19 2501
我们在日常web前端开发过程中，会经常用到各种尺寸和位置。通常是js做动画的时候。轮播图，滚屏动画，粒子，碰撞检测，拖拽，滚动加载等等。这里我将常用的尺寸和位置的获取进行总结，不包括canvas，SVG。在web页面开发中，尺寸和位置分为屏幕的尺寸和位置，元素的尺寸和位置，还有一个是文档的尺寸和位置，不过文档的尺寸和位置是通过document.body获取的，也算是一个元素。还有鼠标的位置。所以尺...
十七、web网页像素知识
gaoya7305的博客
07-13 870
他是把以前的1个css像素变成2个css像素，对应的整个视口就变小了。（放大网页，视口区域就变小了）。— 当我们进入浏览器，按住ctrl + 鼠标滚轮的时候，浏览器可以进行放大缩小。
获取web页面大小、分辨率等信息（javascript）
ahshow的专栏
12-25 2823
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：do
html 自动获取屏幕分辨率,JS获取当前网页大小以及屏幕分辨率等
weixin_33364134的博客
05-31 853
获取当前对象大小以及屏幕分辨率等var s = "";s += " 网页可见区域宽："+ document.body.clientWidth+"";s += " 网页可见区域高："+ document.body.clientHeight+"";s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"";s += " 网页可见区域...
js 获取电脑的分辨率和缩放
qq_24953751的博客
06-17 2220
废话不多说，直接上代码 <script> function centerWindow(url,w,h){ l=(screen.width-w)/2 t=(screen.height-h)/2 window.open(url,'','left='+l+',top='+t+',width='+w+',height='+h) } </script> <input type=button onclick="centerWindow('about:blank',20
前端如何让网页页面完美适配不同大小和分辨率屏幕
最新发布
m0_74823239的博客
12-11 1859
完成适配具体做法：安装postcss，项目根目录新建配置文件postcss.config.js，记得别用exclude排除node_modules，否则postcss无法将包里的px样式也一起转为vw；为项目配置好rem，在项目的index.html的header标签的style标签里，写 html { font-size: 16px;推荐使用postcss插件，它会自动将项目所有的px单位统一转换为vw等单位（包括npm安装的第三方组件），从而实现适配，具体配置规则可参考官网或npm网站介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值