web-dev-qa-db-ja.com

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

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

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

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

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

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

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

header {
    position: fixed;
    ...
}

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

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

7
Aleksej Komarov

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

別のオプションは、CTRLキーを「ブレイク」してWebサイトのズームを無効にすることですが、それは大したことではありません。

0
mkey

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

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

したがって、ズームインの場合、元のdpiを保持するように浮動divをshrinkにしたい、またはその逆の場合。

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

0
Dominic Cerisano