<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> document.body对象, window对象尺寸信息</TITLE>
<META NAME="Author" CONTENT="许明会">
<META NAME="Keywords" CONTENT="clientHeight screen body">
<META NAME="Description" CONTENT="获取网页区域,屏幕区域">
<script type="text/javascript">
function displayScreenSize()
{
//alert("heelo0");
var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder =document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll =document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
var info = "";
info +="document.body.clientWidth:"+bodyWidth + "<br/>" ;
info +="document.body.clientHeight:"+bodyHeight + "<br/>"
info +="<br/>"
info +="document.body.offsetWidth:"+bodyWidthWithBorder + "<br/>"
info +="document.body.offsetHeight:"+bodyHeightWithBorder + "<br/>"
info +="<br/>"
info +="document.body.scrollWidth:"+bodyWidthWithScroll + "<br/>"
info +="document.body.scrollHeight:"+bodyHeightWithScroll + "<br/>"
info +="document.body.scrollTop:"+bodyTopHeight + "<br/>"
info +="document.body.scrollLeft:"+bodyLeftWidth + "<br/>"
info +="<br/>"
info +="window.screenTop:"+windowLeftWidth + "<br/>"
info +="window.screenLeft:"+windowTopHeight + "<br/>"
info +="<br/>"
info +="window.screen.width:"+screenWidth + "<br/>"
info +="window.screen.height:"+screenHeight + "<br/>"
info +="window.screen.availHeight:"+screenAvailHeight + "<br/>"
info +="window.screen.availWidth:" +screenAvailWidth + "<br/>"
info +="<br/>"
document.all("divInfo").innerHTML = info;
}
</script>
</HEAD>
<BODY onresize="displayScreenSize();">
<div id="divInfo">
</div>
</BODY>
</HTML>
分享到：
相关推荐
数控屏Nodejs C ++插件获取设备屏幕尺寸编译sudo yarn test 或者sudo npm run test待办事项清单打字稿npm脚本： node-gyp build和node-gyp rebuild之间有什么区别捕获错误边界参考
js用来取得客户端屏幕尺寸浏览器大小等所有参数
在JavaScript编程中，获取页面和屏幕尺寸大小是前端开发中常见的需求之一，这涉及到一系列的属性和方法，用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数，包括...
本文将深入探讨“前端JS库，适合所有手机屏幕尺寸”的主题，特别是针对移动设备的优化，以及与淘宝网站历史背景的关联。 标题提及的" Flexible "是一个非常关键的关键词，它是指lib-flexible.js库，一个专门用于...
以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`window.screen`对象 `window.screen`对象提供了访问屏幕信息的方法，包括屏幕的物理尺寸。其中，`screen....
在实际项目开发中，除了使用JavaScript进行屏幕尺寸的适配，还应当与CSS媒体查询（Media Queries）配合使用，以达到更好的适配效果。媒体查询允许开发者基于不同的屏幕条件应用不同的CSS样式，而js则可以处理更复杂...
在网页开发中，图片的展示效果常常需要适应不同的设备和屏幕尺寸。为了保持图片的原始比例，避免拉伸或压缩导致失真，开发者通常会使用等比例缩放的方法。本篇将详细介绍如何使用JavaScript实现图片的等比例缩放，并...
FitVids.js是一款针对网页视频响应式布局设计的jQuery插件，它的主要目的是确保嵌入到网站中的视频在不同屏幕尺寸下都能自适应并保持良好的观看体验。在现代网页设计中，随着移动设备的普及，响应式设计已经成为必不...
这些基本信息可以帮助我们了解用户设备的屏幕尺寸，并据此调整网页布局。 #### 获取浏览器窗口尺寸 除了屏幕尺寸外，了解浏览器窗口的实际可视区域也是至关重要的。这可以通过`window.innerWidth`和`window....
在移动开发领域，获取手机屏幕尺寸是至关重要的，这有助于我们适配不同设备，提供良好的用户体验。本资源“获取手机屏幕尺寸的代码段.zip”包含了实现这一功能的源码示例。下面，我们将深入探讨如何在不同的编程语言...
2. **计算缩放比例**：根据地图的显示范围和屏幕尺寸计算出X轴和Y轴的缩放比例（scaleX 和 scaleY），以便将地理坐标映射到屏幕坐标上。缩放比例的计算公式如下： - `scaleX = ((maxLon - minLon) * 3600) / h`，...
响应式自适应屏幕尺寸的Carousel轮播图插件是一种广泛应用于网页设计中的组件，它能够根据用户设备的屏幕尺寸自动调整布局，以提供优秀的用户体验。这个插件是基于jQuery库构建的，jQuery是一个轻量级、功能丰富的...
在JavaScript中，我们可以使用内置对象`screen`来获取用户的显示器分辨率和屏幕尺寸。这个对象提供了多个属性，如`screen.width`和`screen.height`，分别返回浏览器窗口在水平和垂直方向上的像素数。这些属性可以...
本篇文章将深入探讨jQuery响应式自适应屏幕尺寸的轮播图插件及其核心知识点。 **1. jQuery轮播图基本结构** 一个基础的轮播图通常包括以下部分： - 图片容器：存放所有轮播图片的HTML元素。 - 图片列表：包含所有...
总结来说，通过使用JavaScript提供的各种属性和方法，开发者能够获得页面元素的尺寸信息，包括屏幕尺寸、滚动区域尺寸、内容区域尺寸等。在获取尺寸的过程中，除了需要了解不同属性和方法的应用场景，还需要注意...
总结起来，`flexible.js`和`echartPxToRem.js`是移动端Web开发中实现rem适配的重要工具，它们能够帮助我们创建响应式布局，使得页面元素和图表在不同屏幕尺寸下都能保持良好的视觉效果和用户体验。在使用过程中，...
JavaScript可以检测屏幕尺寸，根据不同的设备提供相应的特效，确保在各种屏幕尺寸下都能良好运行。 7. **AJAX与异步加载** AJAX（Asynchronous JavaScript and XML）技术允许在不刷新整个页面的情况下更新部分网页...
因此，React Native提供了自己的解决方案——`Dimensions` API 和 `StyleSheet` API，结合自定义逻辑，来根据设备的屏幕尺寸动态地调整样式。 `Dimensions` API 提供了获取设备屏幕宽度和高度的方法，你可以通过这...
既然身为程序员就不能只会一门语言是，电脑显示器流行的尺寸每年都在增大， 网络上各种层出不穷的js特效，以前接触过的一些特效网站， 那年还是免费下载特效，现在开始扣分下载机制了， 如果网站用户体验一直停留在...