HTML5モバイルページのスケーリング問題の解決策を詳しく解説

通常、HTML5モバイルページを作成するときに、ページに表示される要素の比率が間違っていることがわかります。そのとき追加する必要があるのは、

<meta name="viewport" content="width=device-width,initial-scale=1">

または

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

です。それでは、この文を説明しましょう。

viewport: 表示ウィンドウを表します;

width=device-width、initial-scale=1.0: デバイスの画面幅に等しい表示ウィンドウの幅を表します、initial-scale=1.0。初期スケーリング 比率は 1.0 です。

minimum-scale: スケーリングに許可される最小比率を示します。

maximum: スケーリングに許可される最大比率を表します。

user-scalable: ユーザーがページをズームできるかどうかを示します。はいまたはいいえです

問題例:

現象:

ユーザーがモバイルページ上のテキストを編集するために入力ボックスをクリックすると、ページが自動的に拡大されます

解決策:

ページ上で

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

を head<

head

> タグに挿入するか、ユーザーがページをズームできないようにします user-scalable=no

概要

以上がHTML5モバイルページのスケーリング問題の解決策を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。