最近のブラウザでは、CTRL +-、CTRL-マウスホイール、およびトラックパッド上の2本の指でピンチジェスチャーを使用してズームレベルを変更できます。私自身もこの機能は非常に便利だと思います(さまざまなWebサイトのフォントは小さすぎて読めないことがよくあります)が、テスター(無意識のうちに)が非常に極端なズームレベルを適用して、Webページがこれまでにないようなテストセッションを行いました使える。次に、これを行う可能性はバグであり、ユーザーが自分が行っていることを知らずにズームを適用し、元に戻すことができない可能性があると彼らは主張します。ズームを完全に無効にするように求められますが、私はこのアイデアがあまり好きではありません。
単にズームを無効にする代わりに、その下に最小と最大の境界を設定する可能性が欲しいのですが、ウェブサイトはまだ十分によく見えます。ズームを完全に無効にする方法の質問は、この質問の重複ではありません。
ウェブサイトはReactフレームワークの上に構築されています。
私はCSSに以下を入れようとしました:
body {
min-zoom: 0.75;
max-zoom: 1.5;
}
または
min-zoom: 75%;
max-zoom: 150%;
これは役に立ちませんでした。ズームは25%から500%に変更できますが、私のデザインでは管理できません。のような他のプロパティ
body {
margin: 200px;
}
この場所では尊重されるため、タグまたはcssファイル全体が無視されるだけではありません。
私も追加しようとしました
<meta name="viewport" content="width=device-width,
initial-scale=1.00, maximum-scale=1.5, minimum-scale=0.75">
index.html
の頭のタグに追加しましたが、無視されているようです。
私も追加しました
@viewport {
zoom: 1.00;
min-zoom: 0.75;
max-zoom: 1.5;
}
私のCSSに、ブラウザは気にしません。
最小および最大ズーム境界を決定するには、ユーザーエージェント(ブラウザ)が処理を許可されています。 viewport
メタタグを使用して境界を設定します。例:
<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">
ビューポート<meta>
要素で認識されるプロパティは次のとおりです。
width
:デバイスの仮想ビューポートの幅。height
:デバイスの「仮想ビューポート」の高さ。device-width
:デバイスの画面の物理的な幅。device-height
:デバイスの画面の物理的な高さ。initial-scale
:ページにアクセスしたときの初期ズーム。 1.0
に設定すると、ズームされません。minimum-scale
:訪問者がページをズームできる最小量。 1.0
に設定すると、ズームされません。maximum-scale
:訪問者がページをズームできる最大量。 1.0
に設定すると、ズームされません。user-scalable
:デバイスがズームインおよびズームアウトできるようにします。値はyes
またはno
です。ビューポートメタ要素に関する公式情報は、 CSS Device Adaptation ドラフトにあります。
許可するページで最小ズーム1.00
と最大ズーム2.00
を設定するには、minimum-scale=1.00
とmaximum-scale=2.00
を設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=2.00">
禁止するにはページのズームを変更するには、スケールをそれぞれ1.00
およびuser-scalable=no
に設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=1.00, user-scalable=no">
この機能は幅広いモバイルプラットフォームでサポートされていますが、最小および最大の境界を制限できることを100%保証するものではありません。
CSS at-rule @viewport
in CSS Device Adaptation ですが、 caniuse.com および [〜#〜]によると、サポートは現在低くなっていますmdn [〜#〜] 。ただし、ブラウザベンダーがドラフトに従って機能を実装する場合、min-zoom
およびmax-zoom
プロパティを使用して、スタイルシートのズーム境界を決定できます。例:
@viewport {
zoom: 1.0;
min-zoom: 1.0;
max-zoom: 2.0;
}
補足として、JavaScriptを使用してズームレベルを検出する場合は、 この投稿 で詳細を確認してください。