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

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

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

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 5.7 でブロックポジショニング DDL の問題を解決する

前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

Viteの新しい体験の詳細な説明

Vite とは何ですか? (フロントエンドの新しいおもちゃです) Vite は、ネイティブ ES モ...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

美しい FLASH ウェブサイト デザイン例 50 選

Flashにより、デザイナーや開発者はブラウザ上でリッチなコンテンツを提供し、動き、インタラクティブ...

select @@session.tx_read_only が DB に大量に出現するのはなぜですか?

問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...

MySQLの構文、特殊記号、正規表現の詳細な説明

Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...

Centos7 インストール mysql5.6.29 シェル スクリプト

この記事では、参考までにmysql5.6.29のシェルスクリプトを共有します。具体的な内容は次のとお...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...

ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...

Windows と Linux 間のリモート デスクトップ接続

Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

RocketMQ の Docker インストールとインストール中に発生した問題の解決策

目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...

Vueは動的ルーティングの詳細を実装します

目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...