【IT专家】通过Js来获取所有屏幕分辨率的总结
JS取各种尺寸的方法
JS取各种尺寸的方法JS取浏览器和网页可见区高和宽：<SCRIPT LANGUAGE="JavaScript">var s = "网页可见区域宽："+ document.body.clientWidth;s += "\r\n网页可见区域高："+ document.body.clientHeight;s += "\r\n网页正文全文宽："+ document.body.scrollWidth;s += "\r\n网页正文全文高："+ document.body.scrollHeight;s += "\r\n网页正文部分上："+ window.screenTop;s += "\r\n网页正文部分左："+ window.screenLeft;s += "\r\n屏幕分辨率的高："+ window.screen.height;s += "\r\n屏幕分辨率的宽："+ window.screen.width;s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;alert(s);</SCRIPT>普通DOM子元素的宽高获取：document.getElementById("元素id名称").style.widthdocument.getElementById("元素id名称").style.height在表格及其元素的CSS宽高获取上的浏览器兼容问题：对TABLE进行border-collapse:collapse;设定，对TR和TD进行display:block;设定，这时再去获取任意元素的宽高，各浏览器都会是一致的。
js中screen用法
js中screen用法JavaScript中的Screen对象是用来获取当前浏览器窗口的特性和状态的。
通过Screen对象，你可以获取到浏览器的宽度、高度、颜色深度等属性信息。
本文将一步一步地回答关于Screen对象的用法。
Step 1: 引入Screen对象要使用Screen对象，首先需要在JavaScript代码中引入它。
可以使用以下方式来引入：var screenObject = window.screen;通过以上代码，我们创建了一个名为screenObject的变量，并将Screen对象赋值给它。
Step 2: 获取屏幕属性Screen对象有许多属性，可以通过它们来获取有关屏幕的信息。
以下是一些常用属性的例子：var screenWidth = screenObject.width;var screenHeight = screenObject.height;var colorDepth = screenObject.colorDepth;var pixelDepth = screenObject.pixelDepth;在上面的代码中，我们分别使用width、height、colorDepth和pixelDepth 属性来获取屏幕的宽度、高度、颜色深度和像素深度。
Step 3: 使用屏幕属性一旦我们获取了屏幕的属性，就可以使用它们来进行各种操作。
以下是一些示例：1. 获取屏幕的宽高比例：var aspectRatio = screenWidth / screenHeight;通过将屏幕的宽度除以高度，我们可以得到屏幕的宽高比例。
2. 获取屏幕的像素总数：var totalPixels = screenWidth * screenHeight;通过将屏幕的宽度乘以高度，我们可以得到屏幕的像素总数。
3. 判断设备是否为高分辨率：var isHighResolution = screenWidth >= 1920 && screenHeight >= 1080;通过比较屏幕的宽度和高度与常见的高分辨率标准，我们可以判断设备是否为高分辨率。
js获取可视窗口分辨率的方法
js获取可视窗口分辨率的方法如何使用JavaScript来获取可视窗口分辨率在前端开发过程中，我们经常需要获取用户的可视窗口分辨率，以便为不同屏幕尺寸做好适配。
而JavaScript正是我们使用最广泛的客户端脚本语言，在此教程中，我们将一步一步地介绍如何使用JavaScript来获取可视窗口分辨率。
步骤一：理解分辨率的概念在开始编写JavaScript代码之前，我们首先需要了解什么是分辨率。
在这里，分辨率指的是屏幕的宽度和高度的像素数。
我们获取的分辨率通过两个数值来表示，例如1920 x 1080，其中1920是屏幕的宽度，而1080是屏幕的高度。
步骤二：使用window对象在JavaScript中，我们可以通过window对象来获取可视窗口的分辨率。
window对象表示当前的浏览器窗口，提供了一系列的方法和属性来操作窗口。
步骤三：使用innerWidth和innerHeight属性在window对象中，有两个属性innerWidth和innerHeight可以用来获取可视窗口的宽度和高度。
这两个属性返回的是一个数字，表示像素值。
接下来，我们将分别介绍如何使用这两个属性。
步骤四：获取可视窗口的宽度要获取可视窗口的宽度，我们可以使用window.innerWidth属性。
以下是一个简单的代码示例：var windowWidth = window.innerWidth;console.log("窗口宽度：" + windowWidth);上述代码将获取窗口的宽度，并将其打印到控制台中。
步骤五：获取可视窗口的高度与获取宽度类似，要获取可视窗口的高度，我们可以使用window.innerHeight属性。
以下是一个示例代码：var windowHeight = window.innerHeight;console.log("窗口高度：" + windowHeight);上述代码将获取窗口的高度，并将其打印到控制台中。
获取屏幕的分辨率（多屏幕或者单屏幕）
获取屏幕的分辨率（多屏幕或者单屏幕）我们在做项目的时候，往往会有想要获取屏幕的分辨率的需求。
现在我们就来总结一下如何获取屏幕分辨率，不管是单屏还是多屏。
1、RECT deskRect;GetWindowRect(GetDesktopWindow(),&deskRect);该函数只能获取主屏的分辨率，也就是说如果有多个显示器的话，这个函数只能获取主屏分辨率。
而且该函数获得的结果会受屏幕缩放影响，比如原分变率为1920*1080，且在显示设置里设置了125%的缩放的话，得到的结果为1536*864。
如果缩放为100%的话，结果为1920*1080.2、 HDC hdc = GetDC(NULL);int hdcWidth, hdcHeight;hdcWidth = GetDeviceCaps(hdc, DESKTOPHORZRES);hdcHeight = GetDeviceCaps(hdc, DESKTOPVERTRES);ReleaseDC(NULL, hdc);该方法也是只能获取主屏分辨率，与第一种方法一样，所不同的是它是无视缩放的。
即不管你缩放是100%还是125%还是多少，得到的结果都是1920*10803、 int allX = GetSystemMetrics(SM_CXSCREEN);int allY = GetSystemMetrics(SM_CYSCREEN);该方法也是只能获取主屏分辨率，与第一种方法得到的结果一模一样，受缩放影响。
4、struct ALLMONITORINFO{HMONITOR hMonitor;RECT rect;bool isPrimary;};BOOL CALLBACK MonitorEnumProc(__in HMONITOR hMonitor, __in HDC hdcMonitor, __in LPRECT lprcMonitor, __in LPARAM dwData){vector<ALLMONITORINFO>& infoArray = *reinterpret_cast<vector<ALLMONITORINFO>* >(dwData);ALLMONITORINFO monitorInfo;monitorInfo.hMonitor = hMonitor;//下面这句代码已经获取到了屏幕的分辨率，不管你有多少个屏幕都可以获取到，但是该分辨率是受缩放影响的。
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数
s+="网页正文部分上："+window.screenTop+"\n";
s+="网页正文部分左："+window.screenLeft+"\n";
s+="屏幕分辨率的高："+window.screen.height+"\n";
if(self.innerHeight){// all except Explorer
windowHeight=self.innerHeight;
}elseif(document.documentElement&&document.documentElement.clientHeight){
// Explorer 6 Strict Mode
}else{
xScroll=document.body.offsetWidth;
}
varwindowWidth
if(self.innerHeight){// all except Explorer
windowWidth=self.innerWidth;
}elseif(document.documentElement&&document.documentElement.clientHeight){// Explorer 6 Strict Mode
s+="网页可见区域高："+document.body.clientHeight+"\n";
【IT专家】js 获取浏览器高度和宽度值(多浏览器)
本文由我司收集整编，推荐下载，如有疑问，请与我司联系js 获取浏览器高度和宽度值(多浏览器)2013/03/27 0 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 == 0document.documentElement.clientHeight == 0FireFox为：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屏幕可用工作。
js获取屏幕分辨率的方法
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 ==> 0document.documentElement.clientHeight ==> 0FireFox为：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 s HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。
javascript获取网页宽高方法汇总
javascript获取⽹页宽⾼⽅法汇总document.body.clientWidth - ⽹页可见区域宽document.body.clientHeight - ⽹页可见区域⾼document.body.offsetWidth - ⽹页可见区域宽，包括边线和滚动条的宽document.body.offsetHeight - ⽹页可见区域⾼，包括边线和滚动条的⾼[FF,chrom下是整个页⾯⾼，IE opera 下正常] document.body.scrollWidth - ⽹页总宽document.body.scrollHeight - ⽹页总⾼document.body.scrollTop - 有滚动条的时候，向下拖动滚动条，上⽅不显⽰的那部分⾼度document.body.scrollLeft - 同上window.innerHeight - 浏览器窗⼝的内部⾼度window.innerWidth - 浏览器窗⼝的内部宽度window.screenTop - ⽹页正⽂部分上[⽹页⽂档的最上⽅距离屏幕最上⽅的距离，但FF不⽀持，Chrom,IE,Opera表现都不同，慎⽤]window.screenLeft - ⽹页正⽂部分左[⽹页⽂档的最左⽅距离屏幕最左⽅的距离，但FF不⽀持，Chrom,IE,Opera表现都不同，慎⽤]window.screen.height - 屏幕分辨率的⾼度window.screen.width - 屏幕分辨率的宽度window.screen.availHeight - 可⽤⼯作区⾼度[整个屏幕但不包括下⽅任务栏]window.screen.availWidth - 可⽤⼯作区宽度[整个屏幕的宽度]window.screen.clorDepth - 屏幕⾊彩，常⽤的16,32位等window.screen.deviceXDPI - 屏幕像素/英⼨【IE⽀持，其它不⽀持】JavaScript 获取页⾯宽⾼的⽅法<script>function getInfo(){var s = "";s += " ⽹页可见区域宽："+ document.body.clientWidth;s += " ⽹页可见区域⾼："+ document.body.clientHeight;s += " ⽹页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";s += " ⽹页可见区域⾼："+ document.body.offsetHeight + " (包括边线的宽)";s += " ⽹页正⽂全⽂宽："+ document.body.scrollWidth;s += " ⽹页正⽂全⽂⾼："+ document.body.scrollHeight;s += " ⽹页被卷去的⾼(ff)："+ document.body.scrollTop;s += " ⽹页被卷去的⾼(ie)："+ document.documentElement.scrollTop;s += " ⽹页被卷去的左："+ document.body.scrollLeft;s += " ⽹页正⽂部分上："+ window.screenTop;s += " ⽹页正⽂部分左："+ window.screenLeft;s += " 屏幕分辨率的⾼："+ window.screen.height;s += " 屏幕分辨率的宽："+ window.screen.width;s += " 屏幕可⽤⼯作区⾼度："+ window.screen.availHeight;s += " 屏幕可⽤⼯作区宽度："+ window.screen.availWidth;s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩⾊";s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英⼨";//alert (s);}getInfo();</script>在我本地测试当中：在IE、FireFox、Opera下都可以使⽤document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很⽅便。
javascript获取网页各种高宽及位置的方法总结
javascript获取⽹页各种⾼宽及位置的⽅法总结screen对象获取屏幕的⾼宽（分辨率）screen.width //屏幕的宽screen.height //屏幕的⾼screen.availWidth //屏幕可⽤宽度屏幕的像素⾼度减去系统部件⾼度之后的值screen.availHeight //屏幕可⽤⾼度屏幕的像素宽度减去系统部件宽度之后的值window对象获得窗⼝位置及⼤⼩window.screenTop //窗⼝顶部距屏幕顶部的距离window.screenLeft //窗⼝左侧距屏幕左侧的距离window.innerWidth //窗⼝中可视区域(viewpoint)的宽度alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366window.innerHeight //窗⼝中可视区域(viewpoint)的⾼度该值与浏览器是否显⽰菜单栏等因素有关alert(window.innerHeight); //chrome 643 ff 657 ie 673window.outerWidth //浏览器窗⼝本⾝的宽度(可视区域宽度+浏览器边框宽度)alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382//说明chrome在最⼤化时浏览器窗⼝没有边框宽度,⾮最⼤化时有8px边框//ff和ie上下左右有8px的边框宽度window.outerHeight //浏览器窗⼝本⾝的⾼度alert(window.outerHeight); //chrome 728 ff 744 ie 744element对象在介绍element对象各种⾼宽之前有必要解释⼀下盒模型默认盒模型 box-sizing:content-box;boxWidth = 2*margin + 2*border + 2*padding + widthboxHeight = 2*margin + 2*border + 2*padding + height当不出现滚动条时body{margin:0;}#demo{width:100px;height:100px;padding:10px;border:20px;margin:30px;background-color:red;}<div id="demo">123456789 123456789</div>clientWidth:在页⾯上返回内容的可视宽度（不包括边框，边距或滚动条）clientHeight:在页⾯上返回内容的可视⾼度（不包括边框，边距或滚动条）clientWidth = 2*padding + width - scrollbarWidthconsole.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0clientHeight = 2*padding + height - scrollbarHeightconsole.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0offsetWidth:返回元素的宽度包括边框和填充，但不包括边距offsetHeight:返回元素的⾼度包括边框和填充，但不包括边距offsetWidth = 2*border + 2*padding + widthconsole.log(document.getElementById('demo').offsetWidth) //160offsetHeight = 2*border + 2*padding + heightconsole.log(document.getElementById('demo').offsetHeight) //160offsetLeft: 获取对象相对于版⾯或由 offsetLeft属性指定的⽗坐标的计算左侧位置offsetTop: 获取对象相对于版⾯或由 offsetTop属性指定的⽗坐标的计算顶端位置console.log(document.getElementById('demo').offsetLeft) //30console.log(document.getElementById('demo').offsetTop) //30当出现滚动条时body{margin:0;padding:20px;width:1000px;height:500px;}<div id="demo">123456789123456789</div>scrollWidth: 返回元素的整个宽度（包括带滚动条的隐蔽的地⽅）scrollHeight: 返回整个元素的⾼度（包括带滚动条的隐蔽的地⽅）scrollWidth = 2*padding + widthconsole.log(document.body.scrollWidth) //1040scrollHeight = 2*padding + widthconsole.log(document.body.scrollHeight) //540scrollTop: 向下滑动滚动块时元素隐藏内容的⾼度。
获取 页面分辨率的方法
获取页面分辨率的方法
获取页面分辨率的方法有多种，以下是一些常见的方法：
1. 使用window对象的innerWidth和innerHeight属性：
javascript复制代码：
var width = window.innerWidth;
var height = window.innerHeight;
2. 使用document对象的documentElement对象的clientWidth和clientHeight属性：
javascript复制代码：
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
3. 使用window对象的screenX和screenY属性：
javascript复制代码：
var width = window.screenX;
var height = window.screenY;
需要注意的是，这些方法获取的分辨率都是相对于浏览器窗口的，而不是相对于整个屏幕的。
如果浏览器窗口被缩放或者在全屏模式下运行，获取的分辨率可能会不准确。
此外，这些方法获取的分辨率可能与实际渲染的页面分辨率不
同，因为页面的渲染取决于浏览器的布局引擎和CSS样式。
pc响应式px计算js方法
pc响应式px计算js方法
计算PC响应式设计中像素（px）与JavaScript方法相关的问题，通常涉及到网页布局和元素尺寸的调整。
在响应式设计中，我们希望网页能够在不同设备上以最佳方式呈现，因此需要考虑不同屏幕尺寸和分辨率。
以下是一些可能涉及到的JavaScript方法：
1. 获取屏幕尺寸，可以使用JavaScript的
`window.innerWidth`和`window.innerHeight`属性来获取浏览器窗口的宽度和高度，从而确定屏幕尺寸。
2. 动态调整元素尺寸，根据屏幕尺寸的变化，可以使用JavaScript来动态改变元素的尺寸。
例如，可以通过修改元素的
`style.width`和`style.height`属性来实现动态调整。
3. 响应式布局，使用JavaScript来实现响应式布局，即根据屏幕尺寸的不同，动态调整元素的位置和大小。
可以通过监听
`window`对象的`resize`事件来实现实时调整布局。
4. 媒体查询，虽然不是JavaScript方法，但在响应式设计中经常会与JavaScript一起使用。
媒体查询可以在CSS中根据不同的
屏幕尺寸应用不同的样式，而JavaScript可以用来处理媒体查询之外的动态调整。
总的来说，JavaScript在PC响应式设计中可以用于获取屏幕尺寸、动态调整元素尺寸、实现响应式布局等方面。
结合CSS的媒体查询，可以实现更加灵活和适应性强的响应式设计。
希望这些信息能够帮助你更好地理解PC响应式设计中像素计算和JavaScript 方法的相关内容。
JS获取当前网页大小以及屏幕分辨率等
JS获取当前⽹页⼤⼩以及屏幕分辨率等效果如下：代码如下：<html><head><title>获取当前对象⼤⼩以及屏幕分辨率等</title><body><div style=" width:88%;margin:30px auto; color:blue;" id="div_html"></div><script type="text/javascript">var s = "";s += " ⽹页可见区域宽："+ document.body.clientWidth+"<br />";s += " ⽹页可见区域⾼："+ document.body.clientHeight+"<br />";s += " ⽹页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br />";s += " ⽹页可见区域⾼："+ document.body.offsetHeight + " (包括边线的宽)"+"<br />";s += " ⽹页正⽂全⽂宽："+ document.body.scrollWidth+"<br />";s += " ⽹页正⽂全⽂⾼："+ document.body.scrollHeight+"<br />";s += " ⽹页被卷去的⾼(ff)："+ document.body.scrollTop+"<br />";s += " ⽹页被卷去的⾼(ie)："+ document.documentElement.scrollTop+"<br />";s += " ⽹页被卷去的左："+ document.body.scrollLeft+"<br />";s += " ⽹页正⽂部分上："+ window.screenTop+"<br />";s += " ⽹页正⽂部分左："+ window.screenLeft+"<br />";s += " 屏幕分辨率的⾼："+ window.screen.height+"<br />";s += " 屏幕分辨率的宽："+ window.screen.width+"<br />";s += " 屏幕可⽤⼯作区⾼度："+ window.screen.availHeight+"<br />";s += " 屏幕可⽤⼯作区宽度："+ window.screen.availWidth+"<br />";s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩⾊"+"<br />";s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英⼨"+"<br />";document.getElementById("div_html").innerHTML = s;</script></body></html>代码说明图如下：。
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度发表于2010-04-21 1737 点击 202 次标签网页网页可见区域宽：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.availWidthHTML精确定位scrollLeft,scrollWidth,clientWidth,offsetWidthscrollHeight 获取对象的滚动高度。
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 相对文档的水平座标+垂直方向滚动的量IE，FireFox 差异如下：IE6.0、FF1.06+：clientWidth = width + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.05.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = height(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)网页可见区域宽： 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－－－－－－－－－－－－－－－－－－－技术要点本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
Javascript获取浏览器和屏幕各种高度宽度
海文国际（上海海文信息技术有限公司）
Javascript获取浏览器和屏幕各种高度宽度alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body)，包括border、margin等alert(document.body.offsetHeight); //网页可见区域宽(body)，包括border、margin等alert(document.body.scrollWidth); //网页正文全文宽，包括有滚动条时的未见区域alert(document.body.scrollHeight); //网页正文全文高，包括有滚动条时的未见区域alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)
alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽。
js判断屏幕分辨率的代码
js判断屏幕分辨率的代码⼀般我们可以通过下⾯的代码判断分辨率复制代码代码如下:<script language="JavaScript"><!-- Beginfunction redirectPage() {var wjb51=screen.width;var hjb51=screen.height;alert("经系统检测，你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by ");}// End --></script>js判断浏览器分辨率复制代码代码如下:<script>function ScreenWidth(){if (screen.width == 1440){alert("1440*900");}else if (screen.width == 800){alert("800*600");}else if (screen.width == 1152){alert("1152*864");}else {alert("do not know!");}}</script><input type="button" name="" value="fenbianli " onclick=" ScreenWidth()"/>说明：这段js代码可改造⼀下，改为screen.width>=1024 screen.width=800两种情况所以我选择使⽤下⾯的代码：复制代码代码如下:if(screen.width>=1440){alert('宽屏幕可以加载⼴告了');//⼀些⼴告代码}⽤JS判断不同分辨率调⽤不同的CSS样式⽂件最近看⼀个⽹站，发现显⽰器不同的分辨率，样式⽂件调⽤的也不⼀样，今天写了⼀个例⼦研究⼀下，复制代码代码如下:<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>⽆标题⽂档</title><link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/><script type="text/javascript">window.onload=function(){var sc=document.getElementById("sc");var d=document.getElementById("d");if(screen.width>1024) //获取屏幕的的宽度{sc.setAttribute("href","css/c2.css"); //设置css引⼊样式表的路径d.innerHTML = "你的电脑屏幕宽度⼤于1024，我的宽度是 1200px, 背景⾊现在是红⾊。
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
JavaScript实现移动端页⾯按⼿机屏幕分辨率⾃动缩放的最强代码⼿机的屏幕有⼤有⼩，移动web最好做成响应式布局，也就是⾃适应屏幕，没有固定宽⾼，这样的话，在所有⼿机上都可以正常显⽰。
关于移动端页⾯按⼿机屏幕分辨率⾃动缩放的js，先附上代码<script>var phoneWidth = parseInt(window.screen.width);var phoneHeight = parseInt(window.screen.height);var phoneScale = phoneWidth/750;//除以的值按⼿机的物理分辨率var ua = erAgent;if (/Android (\d+\.\d+)/.test(ua)) {var version = parseFloat(RegExp.$1);// andriod 2.3if (version > 2.3) {document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">'); // andriod 2.3以上} else {document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');}// 其他系统} else {document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">'); }</script>做⼿机端页⾯最头疼的就是物理分辨率和逻辑分辨率的转换了，当拿到设计图的时候，图基本都是按物理分辨率来设计的，⼀般常⽤的为640（iphone5/5s）、750（iphone6/6s），⽽⾕歌等浏览器采⽤⼩⼿机模式浏览页⾯的时候，上⾯的值为逻辑分辨率，调试的时候很难把控页⾯样式，在⼿机端的样式也会因此⼤乱，在页⾯头部加⼊以上⼀段js之后，在⼿机端就可以正常显⽰了，var phoneScale = phoneWidth/750;除以的为设计图设计的页⾯宽度，750是按iphone6来设计（根据⾃⼰使⽤需求来修改），即让页⾯的放⼤⽐率=屏幕的逻辑分辨率/物理分辨率，从⽽达到适应⼿机的效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
通过Js 来获取所有屏幕分辨率的总结
2016/01/07 0
通过Js 来获取所有屏幕适配的总结
script type= text/javascript
window.onload=function(){ //document.getElementById( test ).style.height= 200px //document.getElementsByTagName(‘div’)[0].offsetHeight=‘600px’;
document.getElementsByTagName(‘div’)[0].style.height=document.body.clientHeight
‘px’;
//alert(document.getElementsByTagName(‘div’)[0].offsetHeight=document.body.clientHe ight); //alert(document.body.clientHeight); }; /script html script function a(){document.write( 屏幕分辨率为：screen.width * screen.height 屏幕可用大小：screen.availWidth * screen.availHeight 网页可见区域宽：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);} /script body onload= a() /body /htmltips:感谢大家的阅读，本文由我司收集整编。
仅供参阅！。