web-dev-qa-db-ja.com

メタタグの初期スケール、ユーザースケーラブル、最小スケール、最大スケールの属性とは何ですか？

私はウェブサイトのソースコードを調べていて、このコードを見つけました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

この初期スケール、ユーザースケーラブル、最小スケール、最大スケールが何であり、それらの値が何を意味するのかを知りたいですか？また、彼らが受け入れるすべての価値を教えてください。

html5attributestagsviewportmeta-tags
65
user3483724

これらはビューポートメタタグであり、モバイルブラウザに最も適しています。

幅=デバイス幅

つまり、ブラウザに「私のウェブサイトはデバイスの幅に適応します」と伝えているということです。

初期スケール

これはWebサイトのスケールを定義します。このパラメーターは初期ズームレベルを設定します。つまり、1 CSSピクセルは1ビューポートピクセルと等しくなります。このパラメーターは、向きを変更するとき、またはデフォルトのズームを防ぐときに役立ちます。このパラメーターがないと、レスポンシブサイトは機能しません。

最大スケール

最大スケールは最大ズームを定義します。ウェブサイトにアクセスする際の最優先事項はmaximum-scale=1であり、ユーザーがズームすることはできません。

最小スケール

最小スケールは最小ズームを定義します。これは上記と同じように機能しますが、最小スケールを定義します。これは、maximum-scaleが大きく、minimum-scaleを設定する場合に便利です。

ユーザースケーラブル

1.に割り当てられたユーザースケーラブルは、Webサイトがユーザーにズームインまたはズームアウトを許可していることを意味します。

ただし、user-scalable=noに割り当てると、ユーザーがズームインまたはズームアウトすることをWebサイトが許可しないことを意味します。

108
Jay Patel

ユーザースケーラブル：

user-scalable = yes（デフォルト）ユーザーがWebページをズームインまたはズームアウトできるようにします。

user-scalable = no。ユーザーがズームインまたはズームアウトできないようにします。

次の記事を読むと、より詳細な情報を入手できます。

デモコード（推奨）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
20
xgqfrms

viewportモバイルブラウザのメタタグ、

initial-scaleプロパティは、ページが最初にロードされるときのズームレベルを制御します。 maximum-scale、minimum-scale、およびユーザースケーラブルプロパティは、ユーザーがページをズームインまたはズームアウトする方法を制御します。

7
Wundwin Born

このメタタグは、すべてのレスポンシブWebページで使用されます。これは、デバイスタイプ（電話、タブレット、デスクトップ）を適切にレイアウトするように設計されたものです。属性は、彼らが言うことをします。ただし、MDNの ビューポートメタタグを使用してモバイルブラウザのレイアウトを制御する が示すように、

高dpiの画面では、initial-scale=1が含まれるページは、ブラウザーによって効果的にズームされます。

次のことにより、デフォルトでページがズームなしで表示されることが確認されました。

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

1
Ron Royston

携帯電話やタブレットのアスペクトを制御するためのものです。詳細についてはこちらをご覧ください： https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

0
Samuel De Backer