css - divのズームを無効にしますが、ページのズームは許可します（代替div）

Question

divまたはWebサイトの特定の要素のズームを無効にする方法はありますか？たとえば、ページをズーム可能にしたいが、＃Header divはしたくない場合、一方をズーム可能にし、もう一方をズーム可能にしない方法はありますか？

基本的に、モバイルデバイスをズームすると、ヘッダーもズームされますが、ヘッダーは常に固定サイズ（ズーム不可）にする必要があります。

このコードを使用して、全体的なズームを無効にできることを知っています。

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

score 7 · Accepted Answer

巧妙なハックなしではそれを行うことはできません。

ただし、次のCSSを使用して、モバイルデバイスのズームの問題を修正できます（使用する必要があります）。

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

このコードはposition: absolute、表示幅が720px以下で、ヘッダーが上部に固定されるのではなく、ページの一部になる場合に有効になります。

score 1 · Accepted Answer

直接できるとは思いません。考えられるオプションの1つは、jsイベントのズームを検出し、それに応じて要素をスケーリングすることです。

もう1つのオプションは、Ctrlキーを「壊して」、Webサイトのズームを無効にすることですが、それは大したことではありません。

score 1 · Accepted Answer

要するに、あなたは確かにそれを行うことができます。

ウィンドウのサイズ変更イベントをトラップし、さまざまな新しいウィンドウと内部の幅と高さの属性から計算されたdpiの変化に応じて、フローティングdivのサイズを変更できます。

したがって、ズームインするときは、フローティングdivを縮小して、元のdpiを保持するようにします。その逆も同様です。

これは壮大なフィドルになります-私はそのようなことをしなければならないかもしれないので、すぐにこの答えを再検討してください。クロスブラウザとdpiの不一致にすでに気付いているので、楽しいです。

score 0 · Accepted Answer

同じ問題に直面し、パン/ズームを無効にすることになりました

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>

この素晴らしいライブラリで選択的に再度有効にします

多くの構成がなくてもうまく機能します。

私のhtml構造は次のとおりです

<body>
  <header>Sticky unzoomed header</header>
  <main id='main'>Zoomable content</main>
</body>

次に、メイン要素でパンズームを有効にしました

const PanZ = require('@thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))

score -4 · Accepted Answer

角度を使用している場合は、ヘッダーdivに1つのIDを指定してから、コントローラーに次のコードを記述する方法があります。

document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');

私は自分のプロジェクトで使用しましたが、うまくいきました。

5 に答える 5