首页
学习
活动
专区
工具
TVP
发布

JavaScript、Jquery获取屏幕宽度高度

在日常项目中经常需要获取屏幕宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight... //屏幕分辨率宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取: ($(...window).height()); //浏览器当前窗口可视区域高度 ($(document).height()); //浏览器当前窗口文档高度 ($(document.body).height())...;//浏览器当前窗口文档body高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body高度 包括border padding margin...;//浏览器当前窗口文档body宽度 ($(document.body).outerWidth(true));//浏览器当前窗口文档body宽度 包括border padding margin

5.2K00
您找到你想要的搜索结果了吗?
是的
没有找到

js网页如何获取手机屏幕宽度

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 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/112719.html原文链接:https:

10.6K30

微信小程序-自动适配屏幕高度宽度

微信小程序里面的heightwidth有几种单位,分别是 rpx px vh vw。...miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html wx.getSystemInfo(Object object) 可获取系统信息,屏幕高度可使用高度以及宽度.../length/vh.htm wvh是css3中新单位,是一种视窗单位,在小程序中也同样适用。...小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw 小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh 所以,我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局...实例代码,需要2个view元素在屏幕中间高度各占比47%,宽度98%; .header { witdh: 98%; height: 47vh; }

11.1K41

js获得浏览器高度宽度 参数

" 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线滚动条宽...:"+ window.screen.height; s += " 屏幕分辨率宽:"+ window.screen.width; s += " 屏幕可用工作区高度:"+ window.screen.availHeight...; s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; s += " 你屏幕设置是 "+ window.screen.colorDepth...==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)...==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上

5.9K41

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

屏幕分辨率高:window.screen.height 屏幕分辨率宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度...屏幕可用工作区宽度: window.screen.availWidth ------------------- 技术要点 本节代码主要使用了Document对象关于窗口一些属性,这些属性主要功能用法如下...window.onresize=findDimensions; //--> 源程序解读 (1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前宽度高度...(2)在随后JavaScript代码中,首先定义了两个变量winWidthwinHeight,用于保存窗口高度宽度值。...(3)然后,在函数findDimensions ( )中,使用window.innerHeightwindow.innerWidth得到窗口高度宽度,并将二者保存在前述两个变量中。

7.9K30

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

:window.screenLeft  屏幕分辨率高:window.screen.height  屏幕分辨率宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight...屏幕可用工作区宽度: window.screen.availWidth ------------------- 技术要点 本节代码主要使用了Document对象关于窗口一些属性,这些属性主要功能用法如下...window.onresize=findDimensions; //-->   源程序解读 (1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前宽度高度...(2)在随后JavaScript代码中,首先定义了两个变量winWidthwinHeight,用于保存窗口高度宽度值。...(3)然后,在函数findDimensions ( )中,使用window.innerHeightwindow.innerWidth得到窗口高度宽度,并将二者保存在前述两个变量中。

16K10

如何在onCreate中获取View高度宽度

如何在onCreate中获取View高度宽度 在开发过程中经常需要获取到View宽和高,可以通过View.getWidth()View.getHeight()来得到宽高。...然而新手们经常在onCreate方法中直接调用上面两个方法得到值是0! 这是为什么呢? 因为View绘制是通过两个遍历来完成,一个measure过程,一个layout过程。...只有经过“测量”“布局”之后,View才能正确地完成绘制。而这一切是发生在onCreate方法之后。...所以在onCreate中直接使用View.getWidth()View.getHeight()是无法得到正确。 那应该怎么onCreate中获取View宽高呢?...savedInstanceState); view.post(new Runnable(){ public void run(){ //在这里使用View.getWidth()View.getHeight

5.2K20

js 获取浏览器高度宽度值(多浏览器)

==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上...网页被卷去左: document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左: window.screenLeft 屏幕分辨率高:...window.screen.height 屏幕分辨率宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度:...scrollLeft:设置或获取位于对象左边界窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度

7.5K80

js 获取浏览器高度宽度值(多浏览器)

==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度...网页被卷去左: document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左: window.screenLeft 屏幕分辨率高...: window.screen.height 屏幕分辨率宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度...scrollLeft:设置或获取位于对象左边界窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度

10.3K60

js 获取浏览器高度宽度值(多浏览器)

==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)...==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin...屏幕分辨率宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度: window.screen.availWidth...scrollLeft:设置或获取位于对象左边界窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...--显示浏览器窗口实际尺寸--> 浏览器窗口 实际高度: 浏览器窗口 实际宽度

5.6K10

OC中获取一串字符串高度宽度确定)或宽度高度确定)

https://blog.csdn.net/u010105969/article/details/52937475 项目中我们有时会需要根据字符串来确定UILabel宽度高度,如我们经常遇到单元格自适应问题...如果是要动态知道UILabel高度,那么我们直接利用单元格自适应高度就可以。如果我们要获取UILabel宽度(为什么要获取UILabel宽度?...因为有时如果字符串过长那么UILabel宽度就会相应发生变化),那么就可以利用下面的方法: CGSize size = [string sizeWithFont:font constrainedToSize...:CGSizeMake(MAXFLOAT, 17)];  CGFloat w =size.width; 其实这个方法只是先获取字符串(字符串字体大小是确定了size再确定其宽度。...从方法中可以看出我们固定了字符串高度为17,如果想要获取字符串高度,那么固定宽度就好了。

2.3K30

关于Div宽度高度100%设定

正像你所知道那样,设置DIV大小有两个属性widthheight,以前在学习DIV每次给DIV设置100%宽度高度时都很迷惑,不明确这个100%宽度高度)到底有多宽有多高?...其实,要弄懂div宽度|width100%、div高度|height100%到底是怎么实现,只需弄懂一个简单问题就可以了,即100%基数是谁,就是这个100%是相对于谁width、height来说是...div100%是从其上一级div宽高继承来,有一点很关键,就是要设置div100%显示,必须设置其上一级div宽度高度,否则无效。...你设div高度为100%,那么它是什么地方相对为100%? 前面总得有个容器说明他高度是多少。这样的话div才能按比例100%继承上一级高度。...但是只要为htmlbody设置高度为100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上一级高度了,仅仅设置DIV元素height属性貌似没有什么效果

3.4K20

win10 uwp 获取窗口坐标宽度高度 获取可视范围获取当前窗口坐标宽度高度获取最前窗口范围

本文告诉大家几个方法在 UWP 获取窗口坐标宽度高度 获取可视范围 获取窗口可视大小 Windows.UI.ViewManagement.ApplicationView.GetForCurrentView...().VisibleBounds 获取当前窗口坐标宽度高度 Window.Current.Bounds 获取最前窗口范围 通过 Win32 Api 获取最前窗口范围 IntPtr hWID...E5%8F%A3%E7%9A%84%E5%9D%90%E6%A0%87%E5%92%8C%E5%AE%BD%E5%BA%A6%E9%AB%98%E5%BA%A6.html ,以避免陈旧错误知识误导...,同时有更好阅读体验。...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://lindexi.gitee.io ),不得用于商业目的,基于本文修改后作品务必以相同许可发布。

3.7K30

跨浏览器获取不同环境window窗口宽度高度

在IE9+、SafariFirefox中,outerWidth outerHeight 返回浏览器窗口本身尺寸(无论是从最外层window对象还是从某个框架访问)。...在Opera中,这两个属性值表示页面视图容器大小。而 innerWidth innerHeight 则表示该容器中页面视图区大小(减去边框宽度)。...而对于混杂模式下Chrome,则无论通过 document.documentElement 还是 document.body 中 clientWidthclientHeight 属性,都可以取得视口大小...window.innerHeight 保存着可见视口,也就是屏幕上可见页面区域大小。...移动IE浏览器不支持这些属性,但通过 document.documentElement.clientWidth document.documentElement.clientHeihgt 提供了相同信息

2.5K10

纯CSS实现移动端常见布局——高度宽度挂钩秘密

纯CSS实现移动端常见布局——高度宽度挂钩秘密 不踩坑不回头.之前我在一个项目中大量使用css3calc计算属性.写代码时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...4.4版本手机上,自带浏览器是不支持这个属性....需要效果,如下图: 需求分析 看图,其实很简单.如果宽度是固定,那么这个布局就不要太简单了. 问题是,设备宽度是不固定哦,那么问题就是,在不知道具体宽度时候,如何来设定它对应高度呢?...也就是说,如何在CSS中,找到一个高度宽度挂钩属性.只要存在这个参数,那么,问题就能解决. 那么有没有这个参数呢?...在我们遇到一些问题时候,尤其是布局这种问题,我们要考虑是,能不能用CSS解决,而不时一位去考虑JS.毕竟,JS是用来交互,而CSS是用来布局.

1.2K10
领券