js获取浏览器和屏幕宽高等信息(转)

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量44 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/zhangsir/archive/2008/01/10/1033984.html
版权
虽然这些东西msdn 中都可以找到，但是为了方便查询，还是把网友的总结放了上来：

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

你的屏幕设置是  window.screen.colorDepth 位彩色

你的屏幕设置  window.screen.deviceXDPI (像素/英寸)

关于document.body.scrollTop一直为0的解决办法～这个是个兼容问题～前面有讲过 这里再重新说一下～～

解决办法～～～
=1=
去掉<!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">

这样的web标准语句,因为加上后会让document.body.scrollTop一直为0

=2=
写成:document.documentElement.scrollTop

转载于:https://www.cnblogs.com/zhangsir/archive/2008/01/10/1033984.html

weixin_30807677
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【总结】JS 获取浏览器可视区域的宽高 兼容多浏览器
heyNewbie的博客
08-23 1255
平时在些项目的时候，难免会用到一些基础的宽高等数据，可能是用来做屏幕的适配，也可能是用来计算效果的临界值，总之看似简单的数据，却经常能够用得到，不知道小伙伴们都是怎么获取的，反正楼主是比较懒的那种，非常不喜欢去记那些个方法，所以就总结一下，方便以后查找 先来张经典的图 IE中： document.body.clientWidth ==> BODY对象宽度 document.bod...
js获取浏览器和屏幕宽高等信息
编程爱好者
08-18 304
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.
JS 获取浏览器和屏幕宽高等信息
zhaodan_linda 积累&学习&生活
07-31 610
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全
JS 获取浏览器和屏幕宽高等信息代码
weixin_30451709的博客
04-01 66
JS 获取浏览器和屏幕宽高等信息代码 JS 获取浏览器和屏幕宽高等信息。网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.off...
JavaScript获取浏览器信息的方法
weixin_30394333的博客
07-26 135
Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息. JavaScript代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function message() { txt = "<p>浏览器代码名: " + n...
js获取元素宽高和位置的几种方法&&点击事件坐标
tinfengyee的博客
02-04 3506
一.获取宽高： 1.行内样式获取宽高： var dom= document.getElementById("div"); var divWidth = dom.style.width; var divHeight = dom.style.height; 注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border 2.offset/client/scroll方法获取： va...
浏览器渲染流程、css加载阻塞、js加载阻塞
这道题我不会做...不会做啊..太难了！！
08-26 1752
css、js、html之间的阻塞关系浏览器渲染流程load事件与DOMContentLoaded事件js阻塞css阻塞 浏览器渲染流程 在探究阻塞关系之前，先说一下浏览器渲染流程 解析html建立dom树 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树） 布局render树（Layout/reflow），负责各元素尺寸、位置的计算 绘制render树（paint），绘制页面像素信息 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composit
vue 项目的屏幕自适应方案
热门推荐
UserGuan的博客
11-21 3万+
大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应(会存在拉伸问题)，如果是 React 开发者，可以使用 r-scale-screen 方式。一种基于缩放的大屏自适应解决方案的基本方法，一切都是基于设计草图的像素尺寸，通过缩放进行适配，一切都变得如此简单。autofit.js 提供了一种简单而有效的方法来实现网页的自适应设计，尤其适合需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。在 main.js 中引入并使用即可。
js获取html代码指定字段,js获取网页上选中的部分，包含html代码
weixin_34627088的博客
06-04 526
function getSelectedContents(){if (window.getSelection) { //chrome,firefox,operavar range=window.getSelection().getRangeAt(0);var container = document.createElement('div');container.appendChild(range....
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
10-27
在JavaScript中，获取浏览器和屏幕的宽高信息是常见的需求，尤其在页面布局、动态调整内容展示时。本文将详细讲解如何通过JavaScript实现这一功能，并提供相关代码示例。 首先，我们来了解一下JavaScript中用于获取...
lrz.bundle.js图片压缩插件兼容IOS，Android，PC
12-26
例如，你可以监听`change`事件来获取用户选取的图片，接着调用`lrz()`方法进行压缩，设置好参数如质量、宽高等，最后将压缩后的图片数据（通常是Base64编码）发送到服务器。这个过程简单且灵活，方便集成到现有项目...
XHTML 简介
lly202406的博客
08-09 417
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
机器学习模型评估与优化：常用方法与实践技巧.md
08-15
机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器
强化学习算法介绍.docx
最新发布
08-15
强化学习
SpringBoot+Vue在线商城(电子商城)系统 java毕业设计 源码+sql脚本+论文 完整版
08-15
这个是完整源码 SpringBoot + Vue实现 SpringBoot+Vue在线商城(电子商城)系统 java毕业设计 源码+sql脚本+论文 完整版 数据库是mysql 随着互联网技术的发展和普及，电子商务在全球范围内得到了迅猛的发展，已经成为了一种重要的商业模式和生活方式。电子商城是电子商务的重要组成部分，是一个基于互联网的商业模式和交易平台，通过网络进行产品和服务的销售。电子商城已成为了线上交易和消费的主要方式，人们可以方便快捷地买到自己想要的商品和服务，并在家中享受线上购物的便利性和舒适性。 基于这个背景，我们决定开发一个功能强大、易于使用、可靠性高的商城系统，以满足用户在线购物的需求。这个商城系统将支持多种商品和服务的销售、多种支付方式和多种物流配送方式，提供优惠券和积分等扩展功能，为用户提供舒适的购物体验和服务。同时，我们还将采用最新的技术和开发模式，在保证系统稳定运行的同时，不断推出新的功能和特性，以满足用户不断增长的需求和期望。基于这个背景，我们决定开发一个功能强大、易于使用、可靠性高的商城系统，以满足用户在线购物的需求。这个商城系统将支持多种商品和服务的销售、多
【无人机控制】基于matlab模型预测控制和反馈线性化控制系统的四旋翼无人机【含Matlab源码 7228期】.mp4
08-15
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
“人力资源+大数据+薪酬报告+涨薪调薪”
08-15
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
使用js如何获取浏览器可见的宽高
04-23
你可以使用以下代码来获取浏览器可见的宽度和高度： ``` var viewportWidth = window.innerWidth || document.documentElement.clientWidth; var viewportHeight = window.innerHeight || document.documentElement...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值