javascript获取浏览器窗口分辨率|浏览器全屏分辨率|屏幕分辨率
2024-10-19 11:38:46
浏览器窗口分辨率指显示网页的区域,在PC端由于浏览器窗口大小可调节,这个值是可变的。在手机等移动端浏览器窗口大小不可调节,宽度值是固定的,但竖屏和横屏切换会改变。
浏览器全屏分辨率是指浏览器启用全屏显示隐藏了边栏时的分辨率,在PC上与屏幕分辨率相同,在手机上则是浏览器自身设定的逻辑分辨率。
屏幕分辨率是指显示屏的分辨率,这个检测结果通常等同于其物理分辨率,但一些情况下例外。例如台式机上对浏览器显示内容进行了缩放(非默认的100%),该值会模拟缩放后的屏幕尺寸;重设了屏幕分辨率(非推荐的物理分辨率),该值会显示为重设的分辨率。
相对台式机来说,手机屏幕很小,要清晰阅读网页内容就必需把网页内容放大。所以,手机浏览器通过降低分辨率的做法放大内容,这就造成了手机浏览器即使全屏也小于屏幕分辨率。本页面即可检测出手机浏览器的可见区域分辨率,以及手机浏览器全屏时的分辨率。在检测台式电脑的浏览器分辨率时,拖放浏览器窗口分辨率数值随之变动。台式电脑浏览器无需放大网页内容,所以浏览器全屏时分辨率等于显示器分辨率。你也可以尝试在台式电脑浏览器菜单中找到网页缩放功能并调节,浏览器分辨率数值也会随之改变。
<script>
function fenbianlv() {
var W = document.documentElement.clientWidth
var H = document.documentElement.clientHeight
var width = screen.width
var height = screen.height
document.getElementById("s1").innerHTML = W + '×' + H
document.getElementById("s2").innerHTML = width + '×' + height
document.getElementById("s3").innerHTML = width * window.devicePixelRatio + '×' + height * window.devicePixelRatio
}
window.onload = function () {
fenbianlv()
}
</script>
<p>浏览器窗口分辨率是: <span id="s1"></span></p>
<p>浏览器全屏分辨率是: <span id="s2"></span></p>
<p>屏幕分辨率是: <span id="s3"></span></p>
来源查考:https://www.sioe.cn/xinqing/liulanqi-pingmu-fenbianlv.php
最新文章
- Android中基于CGroup的memory子系统HAL层分析-lmkd
- iOS中 将 颜色转化成图片
- 使用C#/.net语言进行ProE/Creo二次开发
- 原创:goldengate从11.2升级到12.1.2
- 媲美oracle awr/statspack的mysql awr第一版发布
- [SAP ABAP开发技术总结]权限对象检查
- install root certificate failed, Please run as administrator/root/sudo
- C程序的内存分配
- Web前端新人笔记之了解Jquery
- 【转载】计算机视觉(CV)前沿国际国内期刊与会议
- Android笔记之adb命令解析1
- C++ 哈希表
- 依赖于设备的位图(DDB) ,CreateCompatibleBitmap用法
- html标和下标应用
- S全选功能代码
- jquery 的基础知识,以及和Javascript的区别
- 深入浅出Node.js(一):什么是Node.js(转贴)
- java 泛型详解(普通泛型、 通配符、 泛型接口,泛型数组,泛型方法,泛型嵌套)
- iscsi target 之LIO配置
- 记录一下gitlab通过CAS登录慢的问题
热门文章
- JZOJ 7685. 【2022.10.06冲剌NOIP2022模拟】奇怪的函数(function)
- RabbitMQ基础和解疑
- Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘resetFields‘)“
- Access数据库使用
- axios 进行同步请求(async+await+promise)
- DOM04~
- vue开发中,数据更新,但视图不刷新
- Transformers Pipelines
- 【面试题】手写async await核心原理,再也不怕面试官问我async await原理
- 肖sir__整理项目链接