Web中的宽和高
不同的宽高定义
//网页可见区域宽
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
//BODY对象宽度
document.body.clientWidth
//BODY对象高度
document.body.clientHeight
//可见区域宽度
document.documentElement.clientWidth
//可见区域高度
document.documentElement.clientHeight
获取不同宽高的方法
var winWidth;
var winHeight;
// 获取窗口宽度
if (windows.innerWidth)
{
winWidth = windows.innerWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
winWidth = document.body.clientWidth;
}
// 获取窗口高度
if (windows.innerHeight)
{
winHeight = windows.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;
}
===================2015年12月16日更新====================
Window对象
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight //浏览器窗口的内部高度
window.innerWidth //浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器):
<script>
var winWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var winHeight=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
</script>
Screen对象
window.screen 对象在编写时可以不使用 window 这个前缀。
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
Web中的宽和高的更多相关文章
- css中的宽和高
width width表示宽 height height表示高 max-width.min-width max-width表示最大宽度 min-width表示最小宽度 max-height.min-h ...
- CSS------li中的宽和高无法修改问题
如图: 代码:(需要将display属性值设置为inline-block) <ul style="margin-top:50px"> <li style=&quo ...
- js/jQuery中的宽高
一.和window有关的宽高 window.innerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度) window.outerWidth ...
- Android中获取图片的宽和高
在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...
- WPF中三种方法得到当前屏幕的宽和高
WPF程序中的单位是与设备无关的单位,每个单位是1/96英寸,如果电脑的DPI设置为96(每个英寸96个像素),那么此时每个WPF单位对应一个像素,不过如果电脑的DPI设备为120(每个英寸120个像 ...
- html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
- Adatper中获取宽高为0的问题
但是我们想在getView()中获取ImageView的宽和高存在问题,在getView()里面刚开始显示item的时候利用ImageView.getWidth() 获取的都是0,为什么刚开始获取不到 ...
- 【IE6的疯狂之一】IE6中奇数宽高的BUG
IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...
- Android查缺补漏(View篇)--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0?
在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...
随机推荐
- tensorflow之曲线拟合
视频链接:https://morvanzhou.github.io/tutorials/machine-learning/ML-intro/ 1.定义层 定义 add_layer() from __f ...
- mininet实验 动态改变转发规则实验
写在前面 本实验参考 POX脚本设置好控制器的转发策略,所以只要理解脚本. mininet脚本设置好拓扑和相关信息,所以也只要理解脚本. POX脚本目前基本看不懂. 本实验我学会了:POX控制器Web ...
- Alpha 冲刺(10/10)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试整体软件 展示GitHub当 ...
- APUE(unix环境高级编程)第三版---first day---部署书中实例的运行环境(apue.h)
操作环境:RHEL7.0 部署apue.h实例运行环境 1.下载头文件src.3e.tar.gz 2.解压 tar zxvf src.3e.tar.gz 3.创建普通用户(我仿照书上创建的sar用户) ...
- flink ha zk集群迁移实践
flink为了保证线上作业的可用性,提供了ha机制,如果发现线上作业失败,则通过ha中存储的信息来实现作业的重新拉起. 我们在flink的线上环境使用了zk为flink的ha提供服务,但在初期,由于资 ...
- Spring 学习7 -事务
1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...
- wp如何代码重启手机
用过windows phone手机操作系统的人都知道,wp的系统设置界面很长一串,我们并不能快速进入想要的设置项,更受不了的是有些常用的设置项竟然在最下边.因为前段时间没事做,于是乎写了个wp的工具类 ...
- 51NOD 1559:车和矩形——题解
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1559 波雷卡普有一个n×m,大小的棋盘,上面有k个车.他又放了q个矩形在 ...
- python基础----再看property、描述符(__get__,__set__,__delete__)
一.再看property 一个静态属性property ...
- 【数学】【P5076】 Tweetuzki 爱整除
Description 对于一个数 \(k\),找到任意一个 \(x\),满足 \(0~\leq~k~\leq~x~\leq~10^{18}\) 且对于任意一个 \(x\) 进制数,把该数字各数位上的 ...