モバイル Web 開発の概要

1 週間前、私は HTML+CSS に基づいた PC 側のプロジェクトを完了しました。ここ数日で、同じく HTML+CSS に基づいて完了したモバイル側の開発に触れてきました。携帯端末の開発に触れるのは初めてでしたが、開発の過程ではPC端末の開発手順も踏襲しました。最初にレイアウトをカットし、最初に全体の計画を立てて、コンポーネントとして使用できるものを分析することもできます。今回のモバイル端末プロジェクトでは、コンポーネントとして使用できる部品がかなり多くあります。これにより開発効率が向上します。モバイル Web 開発の主なターゲットはハンドヘルド デバイスであるため、PC 開発との違いは、ブラウザの互換性の問題を考慮する必要がなく、異なるサイズのデバイスへの適応の問題を考慮する必要がないことです。

1. まず、Mediaを使用する場合、次のコードを設定する必要があります(headタグに記述します):

このコードのいくつかのパラメータの説明:

• width = device-width: 幅は現在のデバイスの幅と同じです

• initial-scale: 初期スケーリング (デフォルト設定は 1.0)

• minimum-scale: ユーザーがズームできる最小比率 (デフォルト設定は 1.0)

• maximum-scale: ユーザーがズームできる最大比率 (デフォルト設定は 1.0)

• ユーザースケーラブル: ユーザーが手動でズームできるかどうか (デフォルトは「いいえ」です。ユーザーにページのズームインやズームアウトをさせたくないからです)

2. CSSメディアクエリ

指定したメディアタイプとクエリ条件のスタイルシートルールを指定します。さまざまなサイズのデバイスの表示コンテンツを設定します。

1. @メディア画面と(max-width: 960px){
2. ボディ{
3. 背景: #000;
4. }
5. }

上記のコードは画面が960px以下の場合のスタイルを記述しています。画面が 960px 以下の場合、ページの背景色は黒になります。