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

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

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

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

推薦する

Vueバスの簡単な使い方

Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

プロジェクトのフロントエンドとバックエンドでの Echart チャートの使用に関する詳細な説明

目次序文1. プロジェクトアーキテクチャ2. Echart公式サイトにアクセスして自己分析を学ぶ2....

実用的な情報が満載のJavaScript Webフォーム機能通信

1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...

ウェブサイトのAboutページの紹介コンテンツの書き方

公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

全画面ページのスクロール効果を実現するJavaScript

JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...

Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...

Linux teeコマンドの使い方の詳しい説明

teeコマンドは主にstandout(標準出力ストリーム、通常はコマンド実行ウィンドウ)に出力し、同...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...

トップナビゲーションバーメニューを作成するためのHTML+CSS

ナビゲーションバーの作成:技術要件: CS HTMLタグ達成目的:ナビゲーションバーメニューの作成コ...

HTML コード作成ガイド

共通コンベンションタグ自己終了タグ。閉じる必要はありません (例: img input br hr ...

Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...