怎么用JavaScript和jQuery获得网页的高度和宽度

在平时的学习生活当中，对于前端开发一定都很关心，今天我爱编程网小编为大家整理了怎么用JavaScript和jQuery获得网页的高度和宽度，希望能够帮助到大家。

本文目录一览：

• 1、怎么用JavaScript和jQuery获得网页的高度和宽度
• 2、Axure 设计网站原型时，网站宽度和高度怎么设置比较好
• 3、Web网页设计尺寸，到底选哪个？

怎么用JavaScript和jQuery获得网页的高度和宽度

JavaScript和jQuery在前端开发中运用广泛，这篇文章就和大家讲讲JQuery,javascript获得网页的高度和宽度的方法，有需要的朋友可以参考一下，希望可以帮助到爱学习的你！
javascript
网页可见区域宽： 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
jquery
获取浏览器显示区域的高度 ： (window).height();获取浏览器显示区域的宽度：(window).height();获取浏览器显示区域的宽度：(window).width();
获取页面的文档高度 ：(document).height();获取页面的文档宽度：(document).height();获取页面的文档宽度：(document).width();
获取滚动条到顶部的垂直高度 ：(document).scrollTop();获取滚动条到左边的垂直宽度：(document).scrollTop();获取滚动条到左边的垂直宽度：(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll是否把 滚动条计算在内，默认TRUE
options.padding是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border是否把边框计算在内，默认true

我爱编程网

Axure 设计网站原型时，网站宽度和高度怎么设置比较好

【页面尺寸】网页的尺寸受限于两个因素：一个是显示器屏幕（显示器现在种类很多，17寸为主流，正在朝19寸及宽屏的方向发展，但目前也有为数不少的15寸显示器）另一个是浏览器软件（我们常用的IE、遨游、Friefox等）

【页面高度】高度是可以向下延展的，所以一般对高度不限制。对于一屏来说一般没有一个固定值，因为每个人的浏览器的工具栏不同，所以高度没有确切值。

【页面宽度】
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。如果是800的分辨率一般都设成770。但也有设成760的。这些需要明白并且牢记，不然很可能做出来不符合浏览器要求。不过一般我们都会设定的再稍微小一点，因为有些浏览器加了插件或者其他的东西宽度会有变化，所以 800的分辨率一般设定760左右，1024的设定990左右。
网页设计标准尺寸参考：
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间，就不会出现水平滚动条和垂直滚动条。
3、页面长度原则上不超过3屏，宽度不超过1屏，每个标准页面为A4幅面大小，即8.5X11英寸。
4、全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px （另外120*90，120*60也是小图标的标准尺寸 ）
5、每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

【网页广告尺寸】
1、120*120，这种广告规格适用于产品或新闻照片展示。
2、120*60，这种广告规格主要用于做LOGO使用。
3、120*90，主要应用于产品演示或大型LOGO。
4、125*125，这种规格适于表现照片效果的图像广告。
5、234*60，这种规格适用于框架或左右形式主页的广告链接。
6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
8、88*31，主要用于网页链接，或网站小型LOGO。

【广告形式 像素大小 最大尺寸】
BUTTON 120*60(必须用gif) 7K；215*50(必须用gif) 7K
通栏 760*100 25K 静态图片或减少运动效果；430*50 15K
超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告 336*280 35K；585*120
竖边广告 130*300 25K
全屏广告 800*600 40K 必须为静态图片，FLASH格式
图文混排 各频道不同 15K
弹出窗口 400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮 80*80(必须用gif) 7K
流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于5秒60帧(1秒/12帧)

【网页中的广告尺寸】
1.首页右上，尺寸120*60
2.首页顶部通栏，尺寸468*60
3.首页顶部通栏，尺寸760*60
4.首页中部通栏，尺寸580*60
5.内页顶部通栏，尺寸468*60
6.内页顶部通栏，尺寸760*60
7.内页左上，尺寸150*60或300*300
8.下载地址页面，尺寸560*60或468*60
9.内页底部通栏，尺寸760*60
10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*100

Web网页设计尺寸，到底选哪个？

很多新手设计师都会面对一个问题，Web页面尺寸宽度到底选哪个？

其实答案并不是固定的，可以做成1920，也可以做1280。黑客认为最重要的决定因素在于你自己的工作电脑分辨率。

这是广告公司AdDuplex送出的统计大数据

市面上的电脑 屏幕尺寸 多种多样，不过大部分都集中在这几种：

1920-1080：目前常用设备中最大的尺寸（Mac 5K屏除外）

1440-900：15寸 MacBook Pro 为代表，很多 UI设计师 首选

1366-768：普通的PC电脑

1280-800：13寸MacBook Pro为代表

在以上设备中，13寸和15寸Mac Book，虽然实际分辨率非常大，但由于是Retina屏幕，视觉展示上还属于以上范围。

所以，网站的内容显示宽度大部分都在1200px以内，确保小的电脑屏幕能显示全网页内容。更早的时候很多都是960px，不过由于屏幕越来越大，目前比较少。

在了解过电脑屏幕尺寸后， 网页设计 尺寸（本文专指宽度，高度不限）选哪个也很清楚了：选哪个都不会错。

事实上很多设计师是这么做的：用小于1920的屏幕去设计1920的网页。

这样设计没错，而且是很多培训机构、学校的标准定义：网页设计宽度尺寸是1920。

但是如果你用了这个神器的Sketch插件，就不会按照之前的结论来设计了。

以前黑客有介绍过。 点击查看

设计师在做界面的过程中需要经常查看设计稿，以便及时修改设计细节。除非你用1920的屏幕可以设计1920尺寸，否则我们的设计尺寸和屏幕尺寸不相同，就会导致预览的界面偏移，需手动调节居中。

如果设计的尺寸和屏幕尺寸保持一致，那么插件预览的效果就会完美，不用每次都要去调节。

本质上网页设计尺寸选哪个都是正确的，关键在于怎么方便、快捷地帮助我们预览、展示设计稿。

在利用sketch插件频繁预览的前提下，黑客建议网页设计尺寸等于你的工作电脑屏幕尺寸，这会节约你很多时间。在设计后台类的界面时，这个方法的优势会更加明显。

最后有一点需要注意，在进行切图的时候，如果遇到全屏的图，需要把切图修改成1920，否则在1920电脑中切图宽度会不足。不过到了切图这一步，就属于设计工作的后期了，我们只需要 花点时间 把对应切图改成1920即可。

更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网

UI黑客论坛

以上就是关于怎么用JavaScript和jQuery获得网页的高度和宽度的全部内容了，如果需要了解更多相关资讯敬请关注我爱编程网。