如何获取屏幕的宽度_框架

问题一：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

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

这里的字符或者字符串的宽度，计算的是其像素值。有以下两种方法：方法1：

Paint paint= new Paint();

Rect rect = new Rect();

//返回包围整个字符串的最小的一个Rect区域

paintgetTextBounds(str, 0, 1, rect);

int strwidth = rectwidth();

int strheight = rectheight();方法2：

//直接返回参数字符串所占用的宽度

float strwidth = paintmeasureText(str);

对于字符而言，可以将字符转换成字符串，然后计算。例如：

char c = 'c';

然后利用上面两种方法即可。

jq不会出现这样的问题的，检查下代码存放位置是否正确。另外您的jq是什么版本的？另外如果实在取不到那就用这个

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

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

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

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

。。。。

documentbodyclientWidth 用这个原生的比jq快得快

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));

1、clientWidth / clintHeight

clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight

clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom

注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）

注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）

2、clientTop / clientLeft

clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）

clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）

没有滑动条的效果代码如下：

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

</script>

</html>

以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)

有滚动条的代码如下,

在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

consolelog(contentObjclientTop);

consolelog(contentObjclientLeft);

</script>

</html>

最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)

201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)

3、offsetHeight / offsetWidth

offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度

注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjoffsetHeight);

consolelog(contentObjoffsetWidth);

consolelog(contentObjoffsetLeft);

consolelog(contentObjoffsetTop);

</script>

</html>

输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)

offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)

4、offsetTop / offsetLeft

offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离

offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离

5、scrollHeight / scrollWidth

scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值

scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding

6、scrollTop

scrollTop 元素滚动的距离

jquery

$(function(){

/调整窗口自动调整宽度/

$(window)resize(function(){

var h = $(window)height();

var w = $(window)width();

consoleinfo("窗口高度：" + h + "; 窗口宽度：" + w);

});

以上就是关于如何获取屏幕的宽度全部的内容，包括:如何获取屏幕的宽度、怎么获取一个字符串的宽度、jquery获取浏览器的宽度和高度怎么做的为啥$(window).width()不行呢等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9800479.html

如何获取屏幕的宽度

发表评论

评论列表（0条）