怎样用 JavaScript 准确获取手机屏幕的宽度和高度？-H5 チュートリアル-php.cn

怎样用 JavaScript 准确获取手机屏幕的宽度和高度？

WBOY

リリース： 2016-06-07 08:44:46

オリジナル

4333 人が閲覧しました

回复内容：

document.documentElement.clientWidth;
document.documentElement.clientHeight;
这个得到的是设备像素可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320*416(手机480 - 微信状态栏64), iPhone 5里为320*504

我是做移动端html5 web开发的，为了得到个手机宽高折腾了不少，度娘谷歌出来基本都不对，一般情况下没事，但项目上线会出问题，小部分手机获取到的宽高并不正确。比如上面说的screen.width screen.height这些数据在有的手机上并不准确，比如三星的某些型号(具体型号，当时测的，现在忘了)。一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，这个比例在不同的手机上并不一定是2倍关系，特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。

另外Android系统中可以在viewport设置target-densitydpi=device-dpi让viewport的尺寸和屏幕真实尺寸保持一致，但iOS不起作用，所以这个方法不具有普遍性。

所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

给一个viewport设置的示例：

<code class="language-html"><span class="cp">
<span class="nt"></span>
<span class="nt"></span>
    <span class="nt"><meta> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"</span><span class="nt">/></span>
    <span class="nt"><title></title></span>Document<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
</span></span></code>

ログイン後にコピー

window.innerHeight属性，window.innerWidth属性

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当>用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。
注意，这两个属性值包括滚动条的高度和宽度。

screen对象

screen对象包含了显示设备的信息。

screen.height：显示设备的高度，单位为像素。
screen.width：显示设备的宽度，单位为像素。

以上两个属性，除非调整显示设备的分辨率，否则看作是常量，不会发生变化。

下面是根据屏幕分辨率，将用户导向不同网页的代码。

<code class="language-js"><span class="k">if</span> <span class="p">((</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="o"><span class="mi">800</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="o"><span class="mi">600</span><span class="p">))</span> <span class="p">{</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">'small.html'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">'wide.html'</span><span class="p">);</span>
<span class="p">}</span>
</span></span></code>ログイン後にコピー