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

回复内容：

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 08:44 AM

回复内容：

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设置的示例：

<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
    <span class="nt"><meta</span> <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></span>Document<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"></body></span>
<span class="nt"></html></span>

ログイン後にコピー

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

screen对象

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

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

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

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

<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><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><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>
ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7369

Java チュートリアル

1628

CakePHP チュートリアル

1354

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

HTML5 Webサイトにオーディオを追加する方法は？ Mar 10, 2025 pm 03:01 PM

この記事では、＆lt; audio＆gt;を使用してHTML5にオーディオを埋め込む方法について説明します。フォーマット選択のベストプラクティス（MP3、OGG Vorbis）、ファイルの最適化、および再生のためのJavaScriptコントロールを含む要素。複数のオーディオfを使用して強調しています

ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか？ Mar 13, 2025 pm 08:00 PM

この記事では、ビューポートメタタグを使用してモバイルデバイスのページスケーリングを制御し、最適な応答性とパフォーマンスのために幅や初期スケールなどの設定に焦点を当てています。

Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか？ Mar 18, 2025 pm 02:16 PM

この記事では、Geolocation APIを使用してユーザーの場所のプライバシーと許可を管理し、アクセス許可を要求するためのベストプラクティスを強調し、データセキュリティを確保し、プライバシー法を遵守することについて説明します。

ユーザー入力にHTML5フォームを使用する方法は？ Mar 10, 2025 pm 02:59 PM

この記事では、HTML5フォームを作成および検証する方法について説明します。＆lt; form＆gt;の詳細要素、入力タイプ（テキスト、電子メール、番号など）、および属性（必須、パターン、MIN、最大）。 HTML5の利点は、古い方法よりも形成されます

HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか？ Mar 13, 2025 pm 07:51 PM

この記事では、HTML5ページの可視性APIを使用して、ページの可視性を検出し、ユーザーエクスペリエンスを向上させ、リソースの使用量を最適化します。重要な側面には、メディアの一時停止、CPU負荷の削減、視認性の変化に基づいて分析の管理が含まれます。

HTML5とJavaScriptでインタラクティブなゲームを作成する方法は？ Mar 10, 2025 pm 06:34 PM

この記事では、JavaScriptを使用してインタラクティブなHTML5ゲームの作成を詳述しています。ゲームデザイン、HTML構造、CSSスタイリング、JavaScriptロジック（イベント処理とアニメーションを含む）、およびオーディオ統合をカバーしています。必須JavaScriptライブラリ（Phaser、PI

インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか？ Mar 18, 2025 pm 02:17 PM

この記事では、HTML5ドラッグアンドドロップAPIを使用してインタラクティブなユーザーインターフェイスを作成し、要素をドラッグ可能にし、キーイベントを処理し、カスタムフィードバックを使用してユーザーエクスペリエンスを強化する手順を作成する方法について説明します。また、aへの一般的な落とし穴についても説明します