浏览器窗口分辨率指显示网页的区域,在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

最新文章

  1. Android中基于CGroup的memory子系统HAL层分析-lmkd
  2. iOS中 将 颜色转化成图片
  3. 使用C#/.net语言进行ProE/Creo二次开发
  4. 原创:goldengate从11.2升级到12.1.2
  5. 媲美oracle awr/statspack的mysql awr第一版发布
  6. [SAP ABAP开发技术总结]权限对象检查
  7. install root certificate failed, Please run as administrator/root/sudo
  8. C程序的内存分配
  9. Web前端新人笔记之了解Jquery
  10. 【转载】计算机视觉(CV)前沿国际国内期刊与会议
  11. Android笔记之adb命令解析1
  12. C++ 哈希表
  13. 依赖于设备的位图(DDB) ,CreateCompatibleBitmap用法
  14. html标和下标应用
  15. S全选功能代码
  16. jquery 的基础知识,以及和Javascript的区别
  17. 深入浅出Node.js(一):什么是Node.js(转贴)
  18. java 泛型详解(普通泛型、 通配符、 泛型接口,泛型数组,泛型方法,泛型嵌套)
  19. iscsi target 之LIO配置
  20. 记录一下gitlab通过CAS登录慢的问题

热门文章

  1. JZOJ 7685. 【2022.10.06冲剌NOIP2022模拟】奇怪的函数(function)
  2. RabbitMQ基础和解疑
  3. Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘resetFields‘)“
  4. Access数据库使用
  5. axios 进行同步请求(async+await+promise)
  6. DOM04~
  7. vue开发中,数据更新,但视图不刷新
  8. Transformers Pipelines
  9. 【面试题】手写async await核心原理,再也不怕面试官问我async await原理
  10. 肖sir__整理项目链接