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

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

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

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 クラスターのインポートに関する問題

推薦する

Linux カーネル デバイス ドライバー仮想ファイル システムに関する注意事項

/******************** * 仮想ファイルシステム VFS **********...

CentOS7仮想マシンで固定IPアドレスを設定する方法

私の開発環境は、VMWare 仮想マシンに CentOS をインストールし、ホスト ファイルにインタ...

HTML テーブル_Powernode Java アカデミー

HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...

強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する

目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...

Vue3は独自のページングコンポーネントをカプセル化します

この記事の例では、vue3 が独自のページングコンポーネントをカプセル化する具体的なコードを参考まで...

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

docker-compose を使用して Apollo カスタム環境をデプロイする詳細なチュートリアル

目次アポロ コンフィギュレーション センターとは何ですか?アポロの特徴クライアントアーキテクチャアー...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

MySQL ツリー構造テーブルの設計と最適化に関する簡単な説明

序文多くの管理・オフィスシステムでは、ツリー構造がいたるところで見られます。たとえば、「部門」や「機...

MySQLのパラメータについてお話しましょう

序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...

vuex名前空間の使用

目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...

MySQLでホワイトリストアクセスを設定する方法

MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...

HTML/CSS におけるフロートの使用例の詳細

1. floatの基本的な使用例1. まず 2 つの div ボックスを作成し、高さ、幅、背景色を設...

MySQL実践ウィンドウ関数SQL分析クラスの生徒のテストの成績と生活費

目次1. 背景2. テーブル作成ステートメントとデータ挿入テーブルを作成するデータの挿入3. ウィン...