1つのHTML要素のモバイルブラウザズームを防止する

Question

特定のページ要素のブラウザのズームを防ぐ方法が分かっているのでしょうか。

これは私が開発しているサイトのモバイル版です。私はサイトの全幅を走る固定メニューバーを持っており、ナビゲーションを提供するため常にページの上部にとどまっています。私は、ボタン/テキストサイズをタッチスクリーンで動作するように最適化しており、ユーザーがページコンテンツのテキストをズームすると、実際には影響を受けないようにしています。

私が遭遇した唯一の事柄は次のCSSですが、これを試してもうまくいかないようです： -webkit-text-size-adjust：none;

私はViewportメタタグを使ってページ全体のサイズを変更したくないので、メニューバーのhtml要素を対象にしたいだけです。

Answer 1

ズームのメカニズムはブラウザによって異なり、標準化されておらず、スクリプト化もできません。どんな解決策でも、ブラウザをまたいで動作させるにはかなり複雑です。これを行う簡単な方法はありません。

Answer 2

同様の質問に基づいてモーダルダイアログを書きましたが、それはhereです。

本質的に、ロジックは、window.innerWidthと最大ページ幅に基づいてページの縮尺率を取得し、それをエレメントへのCSS変換として適用し、スクリーン上に再配置することです。興味がある場合は、固定要素を入力とし、ユーザーがページをズームするときにこの魔法をすべて実行するライブラリに書き換えます。