モバイル デバイスの人気と Web デザインのレスポンシブ レイアウトに伴い、HTML5 は新しい標準言語として、初期の HTML マークアップ言語に徐々に取って代わりました。 HTML5 には、ページのスケーリングを無効にするという非常に一般的な要件があります。この記事ではHTML5でスケーリングを禁止する方法と原則を紹介します。
まず第一に、なぜズームを禁止する必要があるのでしょうか?通常、モバイルデバイスの画面サイズは小さいため、ユーザーの閲覧エクスペリエンスに適応するために、一部の Web サイトでは、ページのレイアウトが画面サイズに応じて適応的に調整されるレスポンシブデザインを採用しています。多くの場合、ユーザーによるページのズームはレスポンシブ デザインの効果に影響を及ぼし、ページの位置がずれたり、外観やエクスペリエンスに影響を与えたりする可能性があります。
それでは、HTML5 でページのズームを禁止するにはどうすればよいでしょうか?まず、ビューポートを理解する必要があります。
ビューポートとは何ですか?
ビューポートは、Web ページを表示するために使用されるブラウザ内の領域を指し、通常はブラウザ ウィンドウとページの iframe 要素が含まれます。モバイル デバイスでは、画面サイズが限られているため、ビューポート領域は小さくなります。
ビューポートの原則
従来の PC 側では、ビューポートのサイズは固定されており、通常はブラウザ ウィンドウのサイズです。モバイル デバイスでは、ビューポート サイズをデバイス画面より大きくまたは小さく設定できます。これはメタ タグを介して設定する必要があります。
content 属性には、width とInitial-scale の 2 つのパラメータが含まれます。
ここでの初期スケールは、スケーリング率を調整してページのスケーリングを実現するために使用する必要があるものです。
スケーリングを無効にする方法
ページのスケーリングを無効にするには、以下に示すように、メタ タグで Maximum-scale と minimum-scale の値を 1 に設定するだけです。
##この例ではユーザーに関係なく、ページをズームしようとする試みはブロックされます。 さらに、次のように JavaScript を使用してページのスケーリングを無効にすることもできます。 document.addEventListener('touchstart',function (event){ if(event.touches. length> ;1){
event.preventDefault();
});
event.preventDefault();
} );
以上がHTML5でズームを禁止する方法と原則について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。