モバイル Web 開発の基礎知識_html/css_WEB-ITnose

まず、開発コードがコンパイルされた後、その効果を確認するためのツールが必要です。PC 開発の場合、Firefox や Chrome などがありますが、モバイル Web のデバッグには何を使用すればよいでしょうか。携帯電話デバイスにはさまざまなブランドがあり、画面サイズも異なります。もちろん、すべてのモバイル デバイスを購入して、開発中にテーブルに左から右に配置し、コードを書いた後、左から右に更新することはできません (笑)。本当にそんなことをする人がいたら、私は何も言いません、富裕層にお願いするだけですよ～ふふ。

それでは本題に戻りましょう。まず、モバイル Web 開発にはデバッグ ツールが必要です。

1. Google エミュレーション: Google のモバイル エミュレーターは、単に携帯電話の画面サイズとブラウザー機能をシミュレートする PC として理解されます。

開く方法: Chrome ブラウザを開き、F12 キー、開発者ツールを開き、以下に示すように小さな電話のアイコンをクリックします

オープニング効果と各部分の機能:

まず、デバイスでシミュレートする必要があるデバイスを選択できます。これは非常に重要であり、作成するページがどの種類の携帯電話に適応できるかが決まります。

デバイス ドロップを開きます。 -ダウンメニューでシミュレートできるデバイスを確認できます。ここでは、基本的な主流の携帯電話を確認できます。O(∩_∩)O

エミュレーションを使用すると、非常に便利に開発を行うことができます。

2.veiwport: veiwport とは何ですか?

公式の説明: モバイル ブラウザは、仮想「ウィンドウ」(ビューポート) にページを配置します。通常、この仮想「ウィンドウ」(ビューポート) は画面よりも広いため、各 Web ページを小さなウィンドウに押し込む代わりに (モバイル ブラウザーに最適化されていない Web ページのレイアウトが崩れてしまいます)、ユーザーはパンやズームを行って Web ページのさまざまな部分を表示できます。 Safari ブラウザのモバイル バージョンでは、最近ビューポート メタ タグが導入されました。これにより、Web 開発者はビューポートのサイズとズームを制御できるようになります。他のモバイル ブラウザも基本的にこれをサポートしています。

は、単純にモバイル端末の視覚領域として理解されます。

ビューポート関連の設定について:

一般的な例: d2d11a9b377a3b8b71e4c51664a61396

上記の例の中国語の説明 幅は出力デバイスの幅に等しく、高さは出力デバイスの高さに等しい。ズームは許可されていません。初期倍率は 1.0 (1:1 サイズでもあります)、最小ズームは 1.0、最大ズームは 1.0 です。つまり、ユーザーは

width をズームできません。 [pixel_value | device-width] width ほとんどの Android スマートフォンは、特定の値を直接設定しません。サポートされていますが、IOS によってサポートされます。
user-scalable スケーリングが許可されるかどうか (no||yes)
Initial-scale 初期スケール
minimum-scale 最小値スケーリングに許可されるスケール
minimum-scale スケーリングに許可される最大スケール
target-densitydpi
-- dpi_value 70?400 //インチあたりのピクセル数
-- device-dpi デバイスのデフォルトのピクセル密度
-- high-dpi 高ピクセル密度
-- 中 dpi 中ピクセル密度
-- 低 dpi 低ピクセル密度
-- Webkit カーネルは

をサポートする準備ができていません

3 つのメディア クエリ: Media Queries

の使用法の詳細については、メディア クエリについては、http://www.w3cplus.com/content/css3-media-queries を参照してください。 @media all and (min-width: 400px)

すべてのメディア タイプの場合、画面幅は 400px を超えており、特定のスタイルを実行します

@ media all and (max-width: 399px)

Media type all media, run画面幅が 399px 未満の特定のスタイル

@media screen および (min-width:600px) および (max-width:900px)

Media Type 画面では、画面サイズが 600 を超え、未満の場合に特定のスタイルが実行されます。 900px

実際の作品でリンクタグを参照する場合に使用します:

<link rel="stylesheet" media="all and (max-width:600px)" href="small.css" type="text/css" /><link rel="stylesheet" media="all and (min-width:900px)" href="big.css" type="text/css"  /><link rel="stylesheet" media="all and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />