ホームページ ウェブフロントエンド H5 チュートリアル モバイル端末におけるhtml5の画面適応問題例についての考察_html5チュートリアルスキル

モバイル端末におけるhtml5の画面適応問題例についての考察_html5チュートリアルスキル

May 16, 2016 pm 03:47 PM
html5 画面適応 携帯端末

HTML5 はかつて最も注目されているテクノロジであり、HTML5 テクノロジの追加によりモバイル端末はより柔軟になりました。誰もが「一度書いたら、もっと実行する」ことを好みますが、今年はザッカーバーグ氏が HTML5 で間違いを犯したことを認めたため、私たちはそうすべきです。また、新興テクノロジーとしての HTML5 には、まだ多くの欠陥があり、HTML5 の効率性など、多くのプログラマーが文句を言うことができず、消費者も耐えられないことになることを明確に認識する必要があります。しかし、HTML5 が優れた Web テクノロジをもたらしたことは否定できません。これは将来の開発のトレンドであり、私たちができることは、HTML5 を改善し、より優れたより効率的なコードを作成するために努力することです。

さて、くだらない話をしたところで、アンドロイドの適応問題はアンドロイドプログラマにとって最も厄介な問題であり、そのために皆が海を渡って魔法の力を発揮しているのですが。ここ HTML5 では、この問題をより適切に解決できます。モバイル ブラウザは、ページを仮想「ウィンドウ」(ビューポート) に配置します。通常、この仮想「ウィンドウ」(ビューポート) は画面よりも広いため、各 Web ページを小さなウィンドウに押し込む必要はありません (これにより、モバイル ブラウザー用に最適化されていない Web ページのレイアウトなど)、ユーザーはパンやズームを行って Web ページのさまざまな部分を表示できます。一般的に使用されるビューポートのレイアウトは次のとおりです:

具体的な意味は次のとおりです:
width: ビューポートの制御サイズは、600 などの値、またはデバイスの幅である device-width などの特別な値で指定できます (100% に拡大縮小する場合の単位は CSS ピクセルです)。デフォルトの仮想ウィンドウは 980 ピクセルです。幅 (現在、一部の Web サイトの最大の標準幅) に設定し、特定の比率 (3:1 または 2:1) に従って拡大縮小します。

height: 幅に対応し、高さを指定します。

target-densitydpi: 画面のピクセル密度は画面の解像度によって決まり、通常は 1 インチあたりのドット数 (dpi) として定義されます。 Android は、低ピクセル密度、中ピクセル密度、高ピクセル密度の 3 つの画面ピクセル密度をサポートしています。ピクセル密度が低い画面では 1 インチあたりのピクセル数が少なくなりますが、ピクセル密度が高い画面では 1 インチあたりのピクセル数が多くなります。 Android ブラウザと WebView のデフォルト画面は中程度のピクセル密度です。

以下は、target-densitydpi 属性の値の範囲です。

device-dpi – デバイスの元の dpi をターゲット dp として使用します。 デフォルトのスケーリングは行われません。

高 dpi – ターゲット dpi として hdpi を使用します。 中ピクセル密度および低ピクセル密度のデバイスは、それに応じてスケールダウンされます。

medium-dpi – mdpi をターゲット dpi として使用します。 ピクセル密度の高いデバイスはそれに応じてスケールアップし、ピクセル密度のデバイスはそれに応じてスケールダウンします。 これはデフォルトのターゲット密度です。

low-dpi - ターゲット dpi として mdpi を使用します。中ピクセル密度および高ピクセル密度のデバイスは、それに応じてスケールアップします。

– ターゲット dpi として特定の dpi 値を指定します。この値は 70 ~ 400 の範囲である必要があります。







Android ブラウザと WebView が異なる画面のピクセル密度に基づいてページを拡大縮小しないようにするには、ビューポートの target-densitydpi を device-dpi に設定できます。これを行うと、ページは拡大縮小されません。代わりに、ページは現在の画面のピクセル密度に基づいて表示されます。この場合、ページが画面に収まるように、デバイスの幅に合わせてビューポートの幅を定義する必要もあります。
initial-scale: 初期スケーリング率、つまりページが初めてロードされたときのスケーリング率です。
maximum-scale: ユーザーがズームできる最大スケール (0 ~ 10.0 の範囲)。
minimum-scale: ユーザーがズームできる最小スケール (0 ~ 10.0 の範囲)。
user-scalable: ユーザーが手動でズームできるかどうか、値は次のとおりです: ①yes、true はユーザーにズームを許可します。 ②no、false はユーザーにズームを許可しません。no に設定すると、最小スケールと最大スケールになります。スケーリングはまったくできないため、-scale は無視されます。

すべてのスケーリング値は 0.01 ~ 10 の範囲内である必要があります。

これらの属性を設定し、携帯電話の画面に適応させるために html5 のメタ属性に入れます。例:

コードをコピー
コードは次のとおりです:

[mw_shl_code=xhtml,true]content="
高さ = [ピクセル値 | デバイスの高さ] 、
幅 = [ピクセル値 | デバイス- width ] 、
initial-scale = float_value、
minimum-scale = float_value、
maximum-scale = float_value、
user-scalable = [はい、いいえ]、
ターゲット密度 dpi = [dpi_value | high-dpi | low-dpi]
"
/>[/mw_shl_code]

以下は、実際の使用例です。 :

(画面の幅をデバイスの幅に設定し、ユーザーがズームを手動で調整することを禁止します)

コードをコピー
コードは次のとおりです。

>
(設定画面の濃度は高周波、中周波、低周波ごとに自動的にスケーリングされ、ユーザーがスケーリングを手動で調整することは禁止されています)



コードをコピーしますコードは次のとおりです:

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

See all articles