CSS だけで Firefox のキーボード ズーム機能を実現できますか?

CSS による Web ページの拡張性の強化

キーボード ショートカットを使用して Web ページ全体を拡大することは、Firefox が提供する便利な機能です。 CSS だけで同じ機能を実現できますか?

CSS Zoom プロパティの使用

ページ サイズをパーセンテージとして設定する直接のプロパティはありませんが、 CSS ズーム プロパティは実行可能な解決策を提供します。このプロパティは、IE 5.5、Opera、Safari 4、および Chrome でサポートされています。その構文は次のとおりです:

zoom: value;

ここで、値はスケール係数を表します。たとえば、zoom: 3 はページを 300% 拡大します。

互換性に関する考慮事項

残念ながら、zoom プロパティをサポートしていない唯一の主要ブラウザである Firefox は、 「独自の」プロパティ -moz-transform を使用する必要があります。このプロパティは、Firefox 3.5 以降でのみ使用できます。

ブラウザ間の互換性を確保するには、次のコードを使用できます:

div.zoomed {
    zoom: 3;
    -moz-transform: scale(3);
    -moz-transform-origin: 0 0;
}

このコードは、要素に 300% のズームを適用します。クラスがズームされ、Firefox とその他のサポートされているブラウザーの両方に対応します。

以上がCSS だけで Firefox のキーボード ズーム機能を実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。