如何获取屏幕的宽度

如何获取屏幕的宽度,第1张

问题一:js 中怎么获取当前屏幕宽度 documentdocumentElementclientWidth 这个方法返回页面在当前窗口中可见部分的宽度(不包括滚动条宽度);

windowinnerWidth 这个方法返回页面在当前窗口中可见部分宽度(包括滚动条宽度);

windowouterWidth 返回浏览器窗口自身宽度,包括菜单和边框;

screenwidth 返回设备的(屏幕宽度)

问题二:js网页如何获取手机屏幕宽度 ]@]@]

@sssss

var x = navigator;

var w=windowinnerWidth

|| documentdocumentElementclientWidth

|| documentbodyclientWidth;

var h=windowinnerHeight

|| documentdocumentElementclientHeight

|| documentbodyclientHeight;

documentgetElementById(p1)innerHTML=屏幕分辨率:+screenwidth + + screenheight+内部窗口: + w + + h

不知道是不是这个 屏幕分辨率 :pc上的桌面分辨率 。手机上是 一个型号固定的分辨率比如

华为8813的分辨率是480854。。 内部窗口是 改变窗口大小刷新一下就有新的数据

问题三:用javascript 怎样才能很好的获取手机的屏幕宽度和高度 一般来说在移动浏览器上是拿不到屏幕真实分辨率的,因为页面渲染是在一个叫viewport的页面绘制区域内(说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的)。viewport和屏幕的真实尺寸并不是对应的,如在Safari Mobile中viewport默认宽度(320px)是屏幕真实尺寸(640px)的一半,这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例,如initial-scale=5就可以让viewport和屏幕一致的尺寸,但这个比例在不同的手机上并不一定是2倍关系,特别是Android手机,在大屏手机(5寸以上)上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸,就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法,就是:css的媒体查询(@media)是能够检测屏幕尺寸(其实是浏览器窗体的真实尺寸,并不是屏幕的真实物理尺寸,介意的朋友就不要看了)的,通过它来给网页内的某个元素设置一个特殊的属性,然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值(比如480px到540px之间、540px到600px之间等等),不是精确值,所以可能得不偿失,因此我是不推荐的。

问题四:如何获得当前屏幕的高度 windowonload = function(){ 获取屏幕高度 documentdocumentElementclientHeightconsolelog(documentdocumentElementclientHeight); 获取屏幕宽度 documentdocumentElementclientWidthconsolelog(documentdocumentElementclientWidth);}

问题五:html中 如何获取屏幕宽度 把以下这段代码放到之间或之间预览即可看到数据

/将获取的值存到变量里/

width_screen=screenwidth;

height_screen=screenheight;

availWidth_screen=screenavailWidth;

availHeight_screen=screenavailHeight;

colorDepth_screen=screencolorDepth;

/end/

/输出值/

documentwrite(你的屏幕宽为:+width_screen+

你的屏幕高为:+height_screen+

你的屏幕可用宽为:+availWidth_screen+

你的屏幕可用高为:+availHeight_screen+

你的颜色设置所有为数为:+colorDepth_screen);

/end/

问题六:怎么用jquery来获取屏幕的宽度和高速 $(window)width();$(window)height();严格来说,获取window才对

问题七:javascript怎么获取屏幕大小 1

2

3

4

5

6

7

8

9

windowonload = function(){

获取屏幕高度 documentdocumentElementclientHeight

consolelog(documentdocumentElementclientHeight);

获取屏幕宽度 documentdocumentElementclientWidth

consolelog(documentdocumentElementclientWidth);

}

问题八:PHP怎么获取屏幕的宽度与高度? 10分 PHP是无法获取屏幕的高度和宽度的,你可以用JS来获取

Javascript:

网页可见区域宽: documentbodyclientWidth网页可见区域高: documentbodyclientHeight网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)网页可见区域高: documentbodyoffsetHeight (包括边线的高)网页正文全文宽: documentbodyscrollWidth网页正文全文高: documentbodyscrollHeight网页被卷去的高: documentbodyscrollTop网页被卷去的左: documentbodyscrollLeft网页正文部分上: windowscreenTop网页正文部分左: windowscreenLeft屏幕分辨率的高: windowscreenheight屏幕分辨率的宽: windowscreenwidth屏幕可用工作区高度: windowscreenavailHeight屏幕可用工作区宽度: windowscreenavailWidth

JQuery:

$(document)ready(function(){alert($(window)height()); 浏览器当前窗口可视区域高度alert($(document)height()); 浏览器当前窗口文档的高度alert($(documentbody)height());浏览器当前窗口文档body的高度alert($(documentbody)outerHeight(true));浏览器当前窗口文档body的总高度 包括border padding marginalert($(window)width()); 浏览器当前窗口可视区域宽度alert($(document)width());浏览器当前窗口文档对象宽度alert($(documentbody)width());浏览器当前窗口文档body的宽度alert($(documentbody)outerWidth(true));浏览器当前窗口文档body的总宽度 包括border padding margin})

问题九:怎样用 JavaScript 准确获取手机屏幕的宽度和高度 屏幕分辨率的高:windowscreenheight

屏幕分辨率的宽:windowscreenwidth

网页可见区域宽:documentbodyoffsetWidth

网页可见区域高:documentbodyoffsetHeight

问题十:Android开发 怎样获取屏幕的宽高是多少厘米 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸

下面的代码即可获取屏幕的尺寸。

在一个Activity的onCreate方法中,写入如下代码:

[java] view plain copy print

DisplayMetrics metric = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(metric);

int width = metricwidthPixels; 屏幕宽度(像素)

int height = metricheightPixels; 屏幕高度(像素)

float density = metricdensity; 屏幕密度(075 / 10 / 15)

int densityDpi = metricdensityDpi; 屏幕密度DPI(120 / 160 / 240)

DisplayMetrics metric = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(metric);

int width = metricwidthPixels; 屏幕宽度(像素)

int height = metricheightPixels; 屏幕高度(像素)

float density = metricdensity; 屏幕密度(075 / 10 / 15)

int densityDpi = metricdensityDpi; 屏幕密度DPI(120 / 160 / 240)

但是,需要注意的是,在一个低密度的小屏手机上,仅靠上面的代码是不能获取正确的尺寸的。比如说,一部240x320像素的低密度手机,如果运行上述代码,获取到的屏幕尺寸是320x427。因此,研究之后发现,若没有设定多分辨率支持的话,Android系统会将240x320的低密度(120)尺寸转换为中等密度(160)对应的尺寸,这样的话就大大影响了程序的编码。所以,需要在工程的AndroidManifestxml文件中,加入supports-screens节点,具体的内容如下:

[html] view plain copy print

>

如果元素是body内的一级元素,可以用offsetLeft直接获得其左边距。

如果元素是嵌套的,且父元素中存在容器元素(即具有定位属性的元素,包括绝对定位、相对定位、固定定位),则情况要变复杂了,需要把所有容器的offsetLeft和元素的offsetLeft相加才是最终的左边距:

var obj=documentgetElementById("test"); //假定元素的id为test

var left=objoffsetLeft;

while(obj=objoffsetParent){

   left+=objoffsetLeft;

}

consolelog(left);  //left就是左边距

IE中: 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

FireFox中: 

documentbodyclientWidth ==> BODY对象宽度 

documentbodyclientHeight ==> BODY对象高度 

documentdocumentElementclientWidth ==> 可见区域宽度 

documentdocumentElementclientHeight ==> 可见区域高度

Opera中: 

documentbodyclientWidth ==> 可见区域宽度 

documentbodyclientHeight ==> 可见区域高度 

documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

没有定义W3C的标准,则 

IE为: 

documentdocumentElementclientWidth ==> 0 

documentdocumentElementclientHeight ==> 0 

FireFox为: 

documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

Opera为: 

documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 

documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

网页可见区域宽: documentbodyclientWidth 

网页可见区域高: documentbodyclientHeight 

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽) 

网页可见区域高: documentbodyoffsetHeight (包括边线的高) 

网页正文全文宽: documentbodyscrollWidth 

网页正文全文高: documentbodyscrollHeight 

网页被卷去的高: documentbodyscrollTop 

网页被卷去的左: documentbodyscrollLeft 

网页正文部分上: windowscreenTop 

网页正文部分左: windowscreenLeft 

屏幕分辨率的高: windowscreenheight 

屏幕分辨率的宽: windowscreenwidth 

屏幕可用工作区高度: windowscreenavailHeight 

屏幕可用工作区宽度: windowscreenavailWidth 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

eventclientX 相对文档的水平座标 

eventclientY 相对文档的垂直座标 

eventoffsetX 相对容器的水平坐标 

eventoffsetY 相对容器的垂直坐标 

documentdocumentElementscrollTop 垂直方向滚动的值 

eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量

示例:

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函数:获取尺寸 

    //获取窗口宽度 

    if (windowinnerWidth) 

        winWidth = windowinnerWidth; 

    else if ((documentbody) && (documentbodyclientWidth)) 

        winWidth = documentbodyclientWidth; 

    //获取窗口高度 

    if (windowinnerHeight) 

        winHeight = windowinnerHeight; 

    else if ((documentbody) && (documentbodyclientHeight)) 

        winHeight = documentbodyclientHeight; 

    //通过深入Document内部对body进行检测,获取窗口大小 

    if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth) 

    { 

        winHeight = documentdocumentElementclientHeight; 

        winWidth = documentdocumentElementclientWidth; 

    } 

    //结果输出至两个文本框 

    documentform1availHeightvalue= winHeight; 

    documentform1availWidthvalue= winWidth; 

findDimensions(); 

//调用函数,获取数值 

windowonresize=findDimensions;

1、js中获取当前屏幕宽度方法如下:

网页可见区域宽: documentbodyclientWidth

网页可见区域高: documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽: documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高: documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上: windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高: windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度: windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

2、js简介

js,是JavaScript的缩写,是一种直译式脚本语言,一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

avaScript是的源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。

<script type="text/javascript">

$(document)ready(function()

{

alert($(window)height()); //浏览器当前窗口可视区域高度

alert($(document)height()); //浏览器当前窗口文档的高度

alert($(documentbody)height());//浏览器当前窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window)width()); //浏览器当前窗口可视区域宽度

alert($(document)width());//浏览器当前窗口文档对象宽度

alert($(documentbody)width());//浏览器当前窗口文档body的高度

alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

}

)

</script>

你可以用documentbodyscrollWidth

来获取,但兼容性本人没有做过测试。 给你个参考:网页可见区域宽:documentbodyclientWidth

网页可见区域高:documentbodyclientHeight

网页可见区域宽:documentbodyoffsetWidth(包括边线的宽)

网页可见区域高:documentbodyoffsetHeight(包括边线的宽)

网页正文全文宽:documentbodyscrollWidth

网页正文全文高:documentbodyscrollHeight

网页被卷去的高:documentbodyscrollTop(IE7无效)

网页被卷去的左:documentbodyscrollLeft(IE7无效)网页被卷去的高:documentdocumentElementscrollTop(IE7有效)网页被卷去的左:documentdocumentElementscrollLeft(IE7有效)

网页正文部分上:windowscreenTop

网页正文部分左:windowscreenLeft

屏幕分辨率的高:windowscreenheight

屏幕分辨率的宽:windowscreenwidth

屏幕可用工作区高度:windowscreenavailHeight

屏幕可用工作区宽度:windowscreenavailWidth

相对于窗口左上角的X:windoweventclientX相对于窗口左上角的Y:windoweventclientY

相对于整个页面的X:windoweventX

相对于整个页面的Y:windoweventY

以上就是关于如何获取屏幕的宽度全部的内容,包括:如何获取屏幕的宽度、js 可以用offsetWidth 获取控件宽度 , 能获取左边框与body的距离吗、如何用JS动态获取浏览器的宽高等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9719884.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存