モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

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

モバイル向けに最適化されたページでよく使用されるビューポート メタ タグは次のようになります。

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1、最大スケール=1″>

width: ビューポートのサイズを制御します。600 などの値、またはデバイスの幅 (100% に拡大した場合の CSS ピクセル単位) である device-width などの特殊な値を指定できます。
height: 幅に対応して高さを指定します。
initial-scale: 初期ズーム比、つまりページが初めて読み込まれたときのズーム比。
最大スケール: ユーザーがズームできる最大スケール。
minimum-scale: ユーザーがズームできる最小スケール。
ユーザースケーラブル: ユーザーが手動で画像を拡大縮小できるかどうか。はいまたはいいえ

<<:  HTML ヘッドタグの詳細な紹介

>>:  CSS 画面サイズ適応実装例

推薦する

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

MySQLで大きなテーブルをエレガントに削除する方法について簡単に説明します

目次1. 切り捨て操作1.1 MySQL truncate はどのような操作を実行しますか? 1.2...

HTML テーブル タグ チュートリアル (31): セルの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、セルの幅と高さはコンテンツに応じて自動的に調整されますが、セルの幅と高さを手動で設定...

CSS3 で実装された画像ホバートグルボタン

結果:実装コードhtml <ul class="スライド"> <...

Javascript Echarts 空気質マップ効果の詳細な説明

まず、空気質データと地図データを組み合わせる必要があります。マップデータには属性名があるさまざまな都...

HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...

Vue2.x における双方向バインディングの原理と実装

目次1. 実施プロセス2. オブザーバーを表示する3. ウォッチャーを実装する4. コンパイルを実装...

Chrome 73 によるフレックスレイアウトの崩れの解析と解決方法

現象プロジェクトにはネストされたフレックス構造がいくつかあります。 <スタイル> /* ...

JavaScript でドラッグ可能なプログレスバーを実装する

この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

Docker で Docker0 ブリッジのデフォルトのネットワーク セグメントを変更する方法

1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...

Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...

Vue diffアルゴリズムの完全な分析

目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...

mysql 簡単な操作例を表示

この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...