ビューポート属性を共有することで、モバイル端末で縦画面から横画面に切り替える際にフォントがリセットされる問題を解決します。

この記事では、ビューポート属性により、モバイル端末で縦画面から横画面に切り替えるときにフォントがリセットされる問題が解決されることを共有します。最初に作業を始めたとき、携帯電話でページをテストしたことはありませんでした。その結果、いくつかのページを書いた後、ページが非常に小さく、ほとんど見えないことがわかりました。

その理由は、各モバイルデバイスには独自のデフォルトのビューポート幅があるためです。

ビューポート: モバイル ブラウザーには、表示ビューポート (デバイスの画面サイズ) とブラウザーのビューポート (Web ページの幅) の 2 つのビューポートがあります。

iPhone 4s の画面は 320*480 ですが、幅 980 ピクセル (iPhone のデフォルトは 980) のコンテンツを表示できるため、モバイル側に Web ページを配置して表示するとします。 、980/320 に縮小するのと同じです。携帯電話でこれを行うのは、より多くのものを表示するためですが、結果として、PC で作成したページが携帯端末上ではアリと同じくらい小さくなります。

モバイル版にはメタタグ viewport があり、このタグを使用してブラウザのビューポートの幅を表示されるビューポートの幅と同じに設定できます。

<meta name="viewport" content="width=device-width">

ビューポートをサポートしていない一部の古いモバイル デバイス ブラウザ (BlackBerry など) の場合は、次のコードを使用できます

<meta name="HandheldFriendly" content="true">

しかし、現在これを使用している人は多くないと思います。通常は最初の行を書くだけです。それ。

ビューポートと言えば、実際には他にもいくつかのプロパティがあります:

initial-scale: 初期スケーリング比

maximum-scale: 許可される最大スケーリング比

minimum-scale: 許可される最小スケーリング比

user - scalable: 手動スケーリングを許可するかどうか

これらの属性は何に使用されますか?

モバイルデバイスが縦画面から横画面に切り替わると、フォントがリセットされて非常に大きくなります。これを解決するにはどうすればよいですか?

このように設定するだけです

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

ページのデフォルトのズーム率は 1 で、許可されるズームも 1-1 で、これはズームを無効にするのと同じです。ブラウザーはフォントに従ってのみレンダリングします。スタイルによって定義されるサイズ。

こんな書き方も見かけるかもしれません。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

しかし実際には、user-scalable=no 属性を使用すると、スケーリングが無効になっているため、minimum-scale=1、maximum-scale=1 は無視されます。

他の場所でより具体的な説明を見つけました:

1) user-scalable=no はページをスケーリングできないことを保証しますか?いいえ、一部のブラウザはこれを好みません。別のトリックは、minimum-scale=1.0、maximum-scale=1.0 を 1.0 に設定することです。

2)、initial-scale=1.0 初期スケーリングはユーザー スケーラブルによって制御されますか?必ずしもそうではありません。user-scalable=no の場合、user-scalable はユーザーによる手動スケーリングとして解釈されます。

3). モバイル ページはタッチで移動できますが、この操作を禁止する必要がある場合は、ページの幅が画面の幅と等しく、ページが画面にぴったり合うようにしてページを移動できないようにします。

4) ページが画面幅に合わせて縮小されると、テキスト ボックスがアクティブになる (フォーカスを取得する) と、ページが元のサイズに拡大されます。

したがって、安全のために、2番目の書き方を使用することをお勧めします。

もちろん、これの欠点は、ユーザーがズームできないことです。興味のある方は、ここでは説明しません。

少し余談:

CSS3 には -webkit-text-size-adjust というプロパティがあります。

この属性はフォントのスケーリングも無効にします。この属性の利点は、プロジェクトの要件に応じて範囲をカスタマイズおよび設定できることです。

この属性の機能は、ページのズームを制御するのではなく、Webkit カーネル ブラウザのテキスト サイズ調整機能を無効にすることであることに注意してください。中国語版 Chrome ブラウザの最小フォント制限は 12 ピクセルです。

ただし、この属性の悪用により、デスクトップブラウザは数年前にサポートしなくなったため、実際に使用したことはなく、他のマテリアルで見ただけです。

【関連する推奨事項】

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

2. ビューポートの互換性の問題に関するサンプルコード

3. : CSS のレスポンシブ Web デザインを深く理解する - ビューポート

HTML5 のビューポートのパラメーターとその使用方法の紹介

以上がビューポート属性を共有することで、モバイル端末で縦画面から横画面に切り替える際にフォントがリセットされる問題を解決します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。