携帯電話の画面サイズテスト - 携帯電話で実際に表示されるページの幅

ホームページ

ウェブフロントエンド

CSSチュートリアル

携帯電話の画面サイズテスト - 携帯電話で実際に表示されるページの幅_体験交流

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:03 PM

幅携帯電話ページ

モバイル web サイトの開発ではいくつかの問題が発生します。ページのデザインにはどのサイズを使用する必要がありますか?調べてみると、特殊な iphone を除いて、現在市販されている android システムの実際の表示ページ幅は 360px であることがわかりました。

テーブル>

過去 2 年間、ほとんどの android 解像度は 240px または 320px でしたが、現在は 360px です。下位互換性と上位互換性を保つために、最終的に 360px がデザインサイズとして設定されました。後の段階では、css3 メディアクエリまたはメディアクエリ機能が利用できるようになり、さらなる互換性、他のデバイスとの互換性、一部のデバイスの横画面互換性が向上しました。

添付: 以下の画面サイズテスト用の js コード

<!DOCTYPE html>
<html>
<head>
 <title>屏幕尺寸测试</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>

<body style="padding:0px;margin:0px;" scroll="no">
	<script language="javascript">
		var s = "";
		s += "网页可见区域宽："+ document.body.clientWidth;
		s += "<br>网页可见区域高："+ document.body.clientHeight;
		s += "<br>网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
		s += "<br>网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
		s += "<br>网页正文全文宽："+ document.body.scrollWidth;
		s += "<br>网页正文全文高："+ document.body.scrollHeight;
		s += "<br>网页被卷去的高："+ document.body.scrollTop;
		s += "<br>网页被卷去的左："+ document.body.scrollLeft;
		s += "<br>网页正文部分上："+ window.screenTop;
		s += "<br>网页正文部分左："+ window.screenLeft;
		s += "<br>屏幕分辨率的高："+ window.screen.height;
		s += "<br>屏幕分辨率的宽："+ window.screen.width;
		s += "<br>屏幕可用工作区高度："+ window.screen.availHeight;
		s += "<br>屏幕可用工作区宽度："+ window.screen.availWidth;
		s += "<br>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
		s += "<br>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
		document.write(s);
	</script>
</body>
</html>

携帯電話のモデル	画面の垂直幅
iphone 5	320ピクセル
iphone 6	375 ピクセル
iphone 6 プラス	414 ピクセル
nexus 4	384ピクセル
android（ほとんど）	360ピクセル

声明

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

マウスの動きのシミュレーションApr 22, 2025 am 11:45 AM

ライブトークやクラス中にインタラクティブなアニメーションを表示しなければならなかった場合、スライドと対話するのが必ずしも簡単ではないことを知っているかもしれません

Astro ActionsとFuse.jsでのパワー検索Apr 22, 2025 am 11:41 AM

Astroを使用すると、ビルド中にほとんどのサイトを生成できますが、fuse.jsのようなものを使用して検索機能を処理できるサーバー側のコードが少しあります。このデモでは、ヒューズを使用して、個人の「ブックマーク」セットを検索します。

未定義：3番目のブール値Apr 22, 2025 am 11:38 AM

ドキュメントが保存されている間にGoogleドキュメントに表示されるものと同様に、プロジェクトの1つに通知メッセージを実装したかったのです。言い換えれば、a

三元声明の防衛Apr 22, 2025 am 11:25 AM

数ヶ月前、私はハッカーのニュースに出演していました（1つのように）。あなたがこのアイデアに慣れていない場合（私のように

多言語翻訳にWeb Speech APIを使用しますApr 22, 2025 am 11:23 AM

サイエンスフィクションの初期の頃から、私たちは私たちに話しかける機械について空想してきました。今日は当たり前です。それでも、作成のための技術

Jetpack GutenbergブロックApr 22, 2025 am 11:20 AM

私はその日私たちにワードキャンプにいたので、グーテンバーグがコアにリリースされたときのことを覚えています。数ヶ月が今から経過しているので、ますます私たちのことを想像してください

VUEで再利用可能なページネーションコンポーネントを作成しますApr 22, 2025 am 11:17 AM

ほとんどのWebアプリケーションの背後にあるアイデアは、データベースからデータを取得し、可能な限り最良の方法でユーザーに提示することです。そこでデータを扱うとき

「ボックスシャドウ」とクリップパスを一緒に使用しますApr 22, 2025 am 11:13 AM

＆＃039;は、理にかなっていると思われることを非常に実行できる状況を少し段階的に実行しますが、CSSのトリックでそれを成し遂げることができます。これで

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。