モバイル 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 開発者はビューポートのサイズとズームを制御できるようになります。他のモバイル ブラウザも基本的にこれをサポートしています。

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

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

一般的な例:

<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" />

ログイン後にコピー