移动端，获取手机屏幕的宽，应该怎么做

网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。首先解释该标签的含义：<meta name="viewport" content="width=device-width,initial-scale=10, minimum-scale=10, maximum-scale=10, user-scalable=no"/>如果你完全不了解这个标签的使用需要先百度一下。解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。对于此标签还有以下需要分享：1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=10, maximum-scale=10 最大与最小缩放比例都设为10就可以了。2)、initial-scale=10 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。3)、手机页面可以触摸移动，但是如果有需要禁止此 *** 作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。以上是使用viewport标签的一些小体会，分享给大家。

width_screen=screenwidth; // 获取宽度

height_screen=screenheight; 高度

availWidth_screen=screenavailWidth;

availHeight_screen=screenavailHeight;

colorDepth_screen=screencolorDepth;

如果是动态获取的话，就自己写一个方法什么的给封装一下，然后加载。

可以使用 CSS3 transform:scale(arg1,arg2); 直接将整个DIV或者BODY放大缩小

但你要知道直接这样做，效果肯定不好。 不然自适应和适配就不会成为web工程师的考核点之一了。

function a(){

"屏幕宽高为："+screenwidth+""+screenheight；

}

其它：

网页可见区域宽：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 相对文档的水平座标+垂直方向滚动的量

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

1介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。

3浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。

4页面信息：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽度。

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。

HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。

如：一个22寸的显示器，屏幕分辨率为1366 768，那么获取到的屏幕高度为1366px，宽度为768px。

screenheight ： 屏幕高度。

screenwidth ： 屏幕宽度。

screenavailHeight ： 屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。

screenavailWidth ： 屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度 ： 可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screenheight - screenavailHeight 。

windowouterHeight ： 浏览器高度。

windowouterWidth ： 浏览器宽度。

windowinnerHeight ： 浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

windowinnerWidth ： 浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 ： 包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：windowouterHeight - windowinnerHeight。

bodyoffsetHeight ： body总高度。

bodyoffsetWidth ： body总宽度。

bodyclientHeight ： body展示的高度；表示body在浏览器内显示的区域高度。

bodyclientWidth ： body展示的宽度；表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 ： 如高度，可通过浏览器内页面可用高度 - body展示高度得出，即windowinnerHeight - bodyclientHeight。

以上就是关于移动端，获取手机屏幕的宽，应该怎么做全部的内容，包括:移动端，获取手机屏幕的宽，应该怎么做、html中 如何获取屏幕宽度、请问我用html写手机端 我只写一个分辨率的 可不可以通过js得到屏幕宽度在原基础上进行缩放。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！