web-dev-qa-db-ja.com

ブラウザの最小および最大ズームレベルを指定する方法はありますか？

最近のブラウザでは、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に、ブラウザは気にしません。

javascriptcssreactjsbrowserzoom
10
Audrius Meskauskas

最小および最大ズーム境界を決定するには、ユーザーエージェント（ブラウザ）が処理を許可されています。 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を使用してズームレベルを検出する場合は、 この投稿 で詳細を確認してください。

6
Rick