JS通过IE8获取屏幕分辨率不正确的解决方法

最新推荐文章于 2024-04-29 10:17:49 发布
最新推荐文章于 2024-04-29 10:17:49 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： WEB 文章标签： JS IE8 分辨率 JS通过IE获取分辨率不对
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014120634/article/details/80972903
版权

1. 需要根据不同的分辨率做屏幕适配，但是在IE8中打开页面，每一台电脑设置的分辨率都一样，但是JS代码获取到的分辨率却不同。下图为获取屏幕分辨率的代码：

2. 本机设置的分辨率：

 

3. 在IE8浏览器中，通过JS代码获取到的分辨率，和本机设置的分辨率不一样：

4. 出现该问题的原因，查看IE8浏览器的页面>缩放，没有任何比例被选中：

5. 所以将缩放比例勾选为100%，然后重新打开浏览器，通过JS代码获取分辨率：

正确了！

6. 以下为获取页面信息的代码：

<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>

7. 执行结果：

不螚say的話
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
判断用户浏览器及分辨率调用不同的CSS样式文件
09-27
总结来说，通过JavaScript检测浏览器类型和屏幕分辨率，然后动态调整CSS样式文件的引用，是一种传统的解决方法，但它可能不如使用响应式设计灵活和未来友好。在实际开发中，建议优先考虑采用响应式设计，以确保网页...
让iframe自适应高度（支持xhtml）IE firefox兼容
10-30
为了解决浏览器兼容性问题，我们可以使用JavaScript来检测浏览器的类型，然后使用相应的方法来获取页面滚动条的高度。下面是一个示例代码： ``` function getPageScroll(){ var yScroll; if (self.pageYOffset) { ...
js代码获取分辨率不正确问题
XYM8xym的专栏
02-21 1210
js代码获取系统分辨率： var fenBianLv = screen.width + '*' + screen.height; 系统分辨率是：1366*768，而在IE8打开界面时，获取的是1311*737。但是我用火狐浏览器试过能够正常显示，我想可能是IE浏览器设置的问题。 经过修改确实是ie设置的问题：原来IE菜单的“查看”中的“缩放”值变成了105%，我将其改为默认的100%。再次打
IE8中如何获得窗口的分辨率
技术随笔
12-16 2786
IE 8 的zoom功能使用了和IE7中不同的机制，IE 8利用了一个叫DPI Scaling的技术，使得一些常用的获得分辨率的属性结果发生了变化。如果所有的东西都在页面内部，可能很好，但是，我们的空间需要协调和系统其他窗口的关系，就变得很麻烦了。 <!-- function showwidth() { var msg = "screen.width: " + s
如何使用JavaScript获取屏幕分辨率和刷新率？
最新发布
qq_40646695的博客
04-29 511
获取用户屏幕的分辨率和刷新率。
Js中关于Window Screen显示器尺寸在不同浏览器的获取值
qq_43156197的博客
03-27 585
// 显示器尺寸 Screen var width = screen.width;//屏幕总宽度 var height = screen.height;//屏幕总高度 var awidth = screen.availWidth;//屏幕宽度（不包括windows底部任务栏） var aheight = screen.availHeight;//屏幕高度（不包括windows底部任务栏） var cdepth = screen.colorDepth;//色彩深度 var cpixeldepth.
html打印不同分辨率会不一样,javascript如何根据不同的屏幕分辨率为html页面设置不同的css呢?...
weixin_35645652的博客
06-07 369
摘要:下文讲述javascript中为不同分辨率引入不同的css的方法分享，如下所示；实现思路:1.编写一个获取屏幕分辨率的函数2.当遇见不同的分辨率时，修改link标签后的src属性值通过这种方式达到js修改分辨率的目的例:js根据屏幕分辨率修改css的示例分享//设置css的函数function setCss(cssPath){document.getElementsById("lnk").h...
js解决分辨率125%后页面问题
linkar的博客
02-10 1656
js解决分辨率125%后页面问题 1.如果是新开发web页面请使用响应式布局 一个单位的vw代表屏幕宽度的1/100 一个单位的vh代表屏幕高度的1/100 如： width: 10vw; /* vw代表屏幕宽度的1/100 / height: 10vh; / vh代表屏幕高度的1/100 */ 包括字体也可以用。 2.如果是老页面比如大屏，想适配小屏幕 现在电脑显示一般建议都是125%(推荐) windows系统自带的字体项目放大功能，将之调整称为125%/150% ；这时候window.deviceP
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
10-25
本文主要探讨了JavaScript中获取和判断浏览器窗口、屏幕以及网页高度和宽度的方法，这对于网页布局和响应式设计至关重要。在JavaScript中，有多种属性和方法可以用来获取不同维度的尺寸信息。 首先，我们关注的是...
javascript获取网页宽高方法汇总.docx
01-18
本文将详细介绍几种使用 JavaScript 获取网页宽高的方法，并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度，不包括滚动...
JavaScript网页特效范例宝典源码
09-04
实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 ...
JS判断浏览器是否为IE 以及屏幕分辨率
SauceJ的专栏
11-28 1198
var dstURL = "http://www.baidu.com" if(-[1,]){ //alert("this is not ie"); //window.location.href = "http://www.baidu.com" }else{ //alert("this is ie"); var width = window.screen.width; if(w
Js:offsetWidth的Bug
weixin_34241036的博客
11-14 104
offsetWidth 得到的并不是当前元素width的宽度，而是当前元素盒模型的宽度。 例如： #div1{width:200px; height:200px; border:1px solid black; background:red; padding:5px;} <div>test<div> 这个时候的offsetWidth应该是...
scrollTop与offsetTop研究
weixin_33709609的博客
10-05 101
虽然我是做后台出身的，但最近心血来潮越来越关注前台技术了^_^，前二天看了“司徒正美”先生的图片无缝滚动分析后，对于scrollTop和offsetTop这二个以前一直没搞太明白的属性研究了一番，大致弄明白了，贴在这里备份，测试代码如下: &lt;!doctype html&gt;&lt;title&gt;scrollTop study&lt;/title&gt;&lt;style type="...
html中padding在ie8兼容性,CSS在不同浏览器兼容问题,margin偏移/offset溢出等
weixin_30189603的博客
07-02 230
margin在垂直取值时取最大值/p>Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml">margin在垂直取值时取最大值.a { width:300px; height:200px; border:1px s...
js如何获取手机真机的分辨率
qq_37299479的博客
09-27 1606
window.screen.width在手机端获取到的是逻辑分辨率的宽度 物理分辨率 window.screen.width * window.devicePixelRatio
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 6054
window.addEventListener事件踩坑 1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案： window.addEventListener("scroll", this.handleFixedTop,true); 使其在事件捕获的时候触发，该值默认为false(事件冒泡) 2、const scrollT = document.documentElement.scrollTop; 获取不到s
javascript 各种得到浏览器宽度和高度的函数
weixin_34392435的博客
09-28 201
2019独角兽企业重金招聘Python工程师标准>>> ...
css获取屏幕分辨率
09-09
在CSS中，我们无法直接通过CSS代码来获取屏幕分辨率。CSS是用于对网页元素进行样式设置的一种标记语言，主要用于控制网页的布局和外观。获取屏幕分辨率通常需要使用JavaScript来实现。 JavaScript是一种脚本语言，可以嵌入到HTML文档中，在网页加载时执行。通过使用JavaScript，我们可以获取并操作网页的各种属性和信息，包括屏幕分辨率。 要获取屏幕分辨率，我们可以使用JavaScript中的`window.screen`对象。`window.screen`对象包含了一些用于获取和操作屏幕相关信息的属性，其中`window.screen.width`表示屏幕的宽度，`window.screen.height`表示屏幕的高度。 下面是一个简单的JavaScript代码示例，用于获取屏幕分辨率并在网页中显示出来： ```javascript <script> var screenWidth = window.screen.width; var screenHeight = window.screen.height; document.write("屏幕分辨率为：" + screenWidth + "x" + screenHeight); </script> ``` 在上面的代码中，我们首先通过`window.screen.width`和`window.screen.height`获取屏幕的宽度和高度，然后使用`document.write()`将获取到的屏幕分辨率显示在网页中。 需要注意的是，要在HTML文档中使用JavaScript代码，需要将代码放置在`<script>`标签中，以便在网页加载时被执行。 通过这样的方式，我们可以在网页中获取屏幕分辨率并进行相应的布局和样式设置，以适应不同屏幕尺寸的设备。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值