ホームページ > ウェブフロントエンド > H5 チュートリアル > h5 で携帯電話にページ スケーリングを実装する方法

h5 で携帯電話にページ スケーリングを実装する方法

php中世界最好的语言
リリース: 2018-01-29 10:08:59
オリジナル
5151 人が閲覧しました

今回は、h5 で携帯電話でページのスケーリングを実装する方法と、h5 で携帯電話でページをスケーリングするための 注意事項 について説明します。実際のケースを見てみましょう。

通常、

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

<meta name="viewport" content="width=device-width,initial-scale=1">
ログイン後にコピー

または

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-
ログイン後にコピー

です。それでは、この文を修正しましょう。説明は次のとおりです。

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

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

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

user-

scala

ble: ユーザーがズームできるかどうかを表します。ページ、値は、はいまたはいいえです

問題状況の例:

現象:

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

解決策:

ページのヘッダー <

head

> タグに

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
ログイン後にコピー
を挿入するか、ユーザーにページのズームを許可しない user-scalable=no

これらの事例を読んだ後は、この方法を習得したと思います。 、php中国語ウェブサイト

その他

関連記事に注目してください!

関連記事:

HTMLのtitle属性を使ってマウスホバー時にテキストを表示する方法


HTMLのcellpadding属性とcellpacing属性の使い方


inputのカーソルサイズボックスの表示に一貫性がない 解決方法

以上がh5 で携帯電話にページ スケーリングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート