携帯電話開発に必須のスキル: JavaScript および CSS 関数コード共有_JavaScript スキル

1. ビューポート:

それが目に見える領域です。デスクトップブラウザの場合、ビューポートが何であるかは誰もが知っています。ビューポートとは、すべてのツールバー、ステータスバー、スクロールバーなどを削除した後に Web ページを表示するために使用される領域です。
これが実際に機能する領域です。モバイルデバイスの画面幅は従来のWebの画面幅と異なるため、ビューポートを変更する必要があります;

実際には、操作できる属性が 4 つあります:

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

width - // ビューポートの幅 (範囲は 200 ～ 10,000、デフォルトは 980 ピクセル)
height - // ビューポートの高さ (223 ～ 10,000 の範囲)

Initial-scale - // 初期スケーリング (>0 ～ 10 の範囲)

minimum-scale - // ユーザーがズームできる最小スケール
Maximum-scale - // ユーザーがズームできる最大比率

user-scalable - // ユーザーが手動で縮小できるかどうか (いいえ、はい)

では、これらの設定は Safari にどのように正確に通知するのでしょうか?実際には非常に単純で、次の形式の単なるメタです:

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

//エンコーディング

指定された iPhone の Safari 上部のステータス バーのスタイル
ページ上の番号を電話番号として無視するようにデバイスに指示します。

初期スケール = 1 を設定した後、最終的に 1:1 の比率でページをデザインできます。ビューポートに関しては、もう 1 つの非常に重要な概念があります。iPhone の Safari ブラウザにはスクロール バーがまったくなく、単純な「スクロール バーを非表示にする」機能はまったくありません。 iPhone の Safari ブラウザは、実際には最初から Web ページ全体を表示し、ビューポートを使用してその一部を表示します。指でドラッグすると、実際にはページではなくビューポートがドラッグされます。ブラウザの動作の変化はスクロール バーに限定されず、インタラクション イベントも通常のデスクトップとは異なります。

2. リンク:

コードをコピー コードは次のとおりです: ブックマーク設定時に綺麗なアイコンを表示できます

// ポートレート モード スタイル

//縦画面に使用されるスタイル


//ランドスケープモードで使用されるスタイル