JS 获取浏览器高度和宽度

article/2025/9/29 5:26:32

JS获取浏览器高度和宽度

IE中:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

FireFox中:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

Opera中:

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

没有定义W3C的标准,则

IE为:

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

 

 图例

 

 

网页可见区域宽: 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

屏幕可用工作区宽度: window.screen.availWidth

 

 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

 

实现代码

  < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">

</meta></head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr />

<form action="#" method="get" name="form1" id="form1">

<!--显示浏览器窗口的实际尺寸-->

浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />

浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />

</form>

<script type="text/JavaScript">

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数:获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测,获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//调用函数,获取数值

window.οnresize=findDimensions;

//-->

</script>

</body>

</html>

转载于:https://www.cnblogs.com/qixixiaoyu/p/7703692.html


http://chatgpt.dhexx.cn/article/LUQU9eap.shtml

相关文章

javascript获取浏览器宽度和高度

测试浏览器及版本&#xff1a;IE8、FF5、Chrome12 屏幕分辨率&#xff1a;1366 x 768 文档声明&#xff1a;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht…

Vue.js动态获取浏览器高度并进行实时修改DOM元素高度

项目中有高度自适应需求&#xff0c;div的高度始终需要一个浏览器的高度&#xff0c;在此做个记录&#xff0c;以便之后迅速搭建 <template> <div class"content" :style"contentStyleObj"></div> </template> <script> …

Vue,JS获取屏幕,浏览器高度宽度

Vue&#xff0c;JS获取屏幕&#xff0c;浏览器高度宽度 一、介绍 1. 容器 一个页面的展示&#xff0c;从外到内的容器为&#xff1a;屏幕、浏览器以及页面本身。 HTML元素展现在页面内&#xff0c;页面展现在浏览器内&#xff0c;而浏览器展现在屏幕内。 通过Js的一些对象…

JS -获取屏幕/浏览器高度

一、展示图 二、屏幕信息 window.screen.height&#xff1a;设备显示屏的高度 这个是设备显示屏的高度&#xff0c;各个机型的显示屏高度都不一样&#xff0c;可以在系统设置中看window.screen.availHeight&#xff1a;屏幕的可用高度 一般是显示屏高度减去显示屏工具栏的高度 …

【已解决】依赖包后出现Failed to resolve:com.github.xxx错误

【已解决】依赖包后出现Failed to resolve:com.github.xxx错误 问题 AndroidStudio常常需要引入第三方Library开源库&#xff0c;然后可能会遇到下面这样的问题&#xff1a; 原因 引入maven { url “xxx” }的时候&#xff0c;位置添加错了。 错误&#xff1a;添加到了bui…

webview添加参数与修改请求头的user-agent

前言 最近公司项目需求&#xff0c;在项目中嵌入h5页面&#xff0c;一般原生&#xff0c;看着感觉跟往常一样&#xff0c;一个地址就完全ok了&#xff0c;如果是这样那就没有这个博文的必要了&#xff01; 项目的登录使用的token登录&#xff0c;在移动端的登录是原生的&…

Android | 如何电脑调试APP中的webview 如何查看webview原web项目的console.log/控制台报错

目录 一、浏览器调试二、WebChromeClient onConsoleMessage()三、腾讯TBS Studio四、参考文献 最近一直在vueAndroid同时合作开发一个功能&#xff0c;我一个小小安卓开发迈向web开发真就处处是难关 一、浏览器调试 浏览器&#xff1a;chrome、Edge 说明&#xff1a;chrome是…

Android之 WebView的使用

一 简介 1.1 WebView是用来展示网页的控件&#xff0c;底层是google的WebKit的引擎。 比起苹果的WebView&#xff0c;webkit一些不足地方&#xff1a; 不能支持word等文件的预览纯标签加载&#xff0c;并不支持所有标签的加载不支持文件的下载&#xff0c;图片的放大&#xf…

Android:WebView 使用漏洞详解与解决方案

目录 1. 类型 WebView中&#xff0c;主要漏洞有三类&#xff1a; 任意代码执行漏洞密码明文存储漏洞域控制不严格漏洞 2. 具体分析 2.1 WebView 任意代码执行漏洞 出现该漏洞的原因有三个&#xff1a; WebView 中 addJavascriptInterface&#xff08;&#xff09; 接口WebVie…

android webview页面下方有input输入框,键盘弹起上滑无法拖动,导致输入内容也无法看到...

在手机端页面中有input输入框&#xff0c;输入框聚焦的时候会弹出键盘&#xff0c;如果input在页面的中下部&#xff0c;弹出的键盘会覆盖住input输入框&#xff0c;这个时候输入内容通常都是看不见的&#xff0c;用户看不到自己输入自己已经输入的内容这种体验非常的不好&…

Google上架因为WebView被拒

原因&#xff1a;在WebViewClient的回调方法onReceivedSslError里只单纯的写了handler.proceed();没给出明确的原因 两种解决方法&#xff1a; 1、去掉WebViewClient的回调方法onReceivedSslError 2、修改onReceivedSslError如下所示 Override public void onReceivedSslEr…

Android 使用Webview加载PDF文件

一、核心代码 protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_pdf_renderer);WebSettings webSettings weContainer.getSettings();webSettings.setJavaScriptEnabled(true);// 设置WebView是否允…

Android中解决ScrollView嵌套WebView底部留白太多和高度问题

前言&#xff1a; Android中WebView的坑很多&#xff0c;比如低版本内核不支持&#xff0c;加载速度慢&#xff0c;重定向等等&#xff0c;当使用ScrollView嵌套WebView时坑更多&#xff0c;有人说为啥要嵌套&#xff1f;单独使用WebView或者ScrollView不行吗&#xff1f;答案…

webview适配(一):文件选择,相机拍照,相册选择

说起来android适配webview就是比较烦人&#xff0c;本人遇到过很多坑&#xff0c;但是之前从来没有过记录&#xff0c;例如&#xff1a;文件选择框&#xff0c;toast弹框&#xff0c;视频不正常播放&#xff0c;视频各种不全屏&#xff08;网上说的方法都不行时候就崩溃了&…

Android跟web哪个好,比系统自带的WebView更好用 | AgentWeb

名称 AgentWeb 语言 Android 平台 GitHub 作者 Justson 在混合化开发大行其道的今天&#xff0c;安卓开发经常会用到WebView&#xff0c;用于加载网页。系统自带的WebView性能和流畅度都一般&#xff0c;今天给大家推荐一款第三方WebView&#xff0c;性能比系统自带的要好&…

X5 浏览器内核调研报告

关于这份调研报告&#xff0c;不是从技术角度深入探索&#xff0c;重点是从产品本身分析&#xff0c;通俗易懂才是重点。主要是为了锻炼平时做技术调研和竞品分析的能力&#xff0c;以及业务拓展的技术储备。内容有点多&#xff0c;下面 **X5 **内核调研报告将分为三个环节&…

南京理工大学计算机考研资料汇总

南京理工大学研究生院 http://gs.njust.edu.cn/ 南京理工大学计算机科学与工程学院 http://cs.njust.edu.cn/ 南京理工大学计算机科学与工程学院始建于1953年创办的哈尔滨军事工程学院模拟计算机研究组&#xff0c;先后经历了炮兵工程学院计算机教研室&#xff08;1960年&a…

上海海洋大学计算机考研资料汇总

上海海洋大学研招网 上海海洋大学信息学院 上海海洋大学&#xff08;Shanghai Ocean University&#xff09;是上海市人民政府与国家海洋局、农业农村部共建高校&#xff0c;国家“双一流”世界一流学科建设高校&#xff0c;入选国家卓越农林人才教育培养计划、国家建设高水平…

2024东华大学计算机考研信息汇总

最新数据见&#xff1a;东华大学_信息汇总_N诺计算机考研 东华大学计算机科学与技术学院官网&#xff1a;http://cst.dhu.edu.cn/ 东华大学&#xff08;Donghua University&#xff09;&#xff0c;简称“东华”&#xff0c;地处中国上海&#xff0c;是教育部直属、国家“211工…

西南石油大学计算机考研资料汇总

西南石油大学&#xff08;Southwest Petroleum University&#xff09;&#xff0c;简称“西南石大”&#xff0c;坐落于四川省成都市&#xff0c;是经中华人民共和国教育部备案的一所中央与地方共建、以四川省人民政府管理为主的高等院校&#xff0c;是世界一流学科建设高校、…