ウェブページの幅を携帯電話の画面(ビューポート)の幅に自動的に適応させる実装コード

ウェブページの幅を携帯電話の画面(ビューポート)の幅に自動的に適応させる実装コード

一般的な書き方は次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  name = "ビューポート"  コンテンツ= "初期スケール=1.0" >   

その他の書き方:

XML/HTML コードコンテンツをクリップボードにコピー
  1. 1. <メタ  name = "ビューポート"  コンテンツ= "幅=デバイス幅、初期スケール=1.0、最小スケール=0.5、最大スケール=2.0、ユーザースケーラブル=はい"   />        


上記の文を Web ページの <head> に追加すると、Web ページの幅が携帯電話の画面の幅に自動的に適応するようになります。
で:

width=device-width: 幅がデバイス画面の幅であることを示します
initial-scale=1.0: 初期スケーリング比率を示します
minimum-scale=0.5: 最小ズーム比を示します
最大スケール=2.0: 最大ズーム比を示します
user-scalable=yes: ユーザーがズーム比を調整できるかどうかを示します

Web ページを開く場合、自動的に元の比率で表示され、ユーザーが変更できないようにするには、次の手順を実行します。


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

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ" />


このように記述すると、一部のヘッダーバナーやその他の画像の幅を style="width:100%" に設定でき、ページ全体がデバイス上で全画面表示されます。

<<:  Element UI で自動サイズ調整テキストエリアの高さを設定する方法

>>:  Rancher のデプロイメントと K8S クラスターのインポートに関する問題

推薦する

mysql コマンドライン スクリプトの実行例

この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...

Expressはログイン認証を実装

この記事では、ログイン認証を実装するためのExpressの具体的なコードを例として紹介します。具体的...

MySQL データベース クエリ パフォーマンス最適化戦略

クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

Windows10でのMySQL 5.7.21のインストールと設定のチュートリアル

この記事では、MySQL 5.7.21 のインストールと設定方法を記録し、皆様と共有します。 1. ...

MYSQLでリモートアクセス権限を有効にする方法

1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...

SSMプロジェクトは、ホットデプロイメント構成を実装するためにTomcatとMavenを使用してWARパッケージとしてデプロイされることが多い。

背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...

HTML ドラッグ アンド ドロップ機能の実装コード

Vueベースこの機能の核となるアイデアは、JavaScript コードを通じてページ上のノードの左余...

数千万のデータを扱うMySQLのページングクエリのパフォーマンスを最適化する

MySQL のデータ量が多い場合、制限ページングが使用されます。ページ数が増えると、クエリの効率が低...

Windows ベースの MySQL 8.0.12 のインストール

このチュートリアルは Windows システムにのみ適用されます。インストールしたがまだインストール...

MySQL では UTF-8 が推奨されないのはなぜですか?

最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...

Vue3 AST パーサー - ソースコード分析

目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...