モバイル Web 開発では、解像度に応じて文字サイズを調整する必要がありますか? _html/css_WEB-ITnose

数日前に非常にシンプルなページを作成しました。上部にバナー画像、その下に説明文の段落、その下に表があります。
当初はフォントサイズを1.2emに統一していましたが、デザイン案の幅が640ピクセルの環境では、ページとデザイン案は基本的に同じなので、小さいサイズで使用すると見栄えが良くなります。 -画面の携帯電話では、バナー画像が画面と同じ幅に縮小されるため、比例して縮小され、テキストは以前と同じ大きさのままで、フォントが特に大きく表示されます。そこで、私がこれを処理する方法は、CSS メディア クエリを使用して、画面幅の範囲内で使用するフォント サイズを決定することです。
長い間モバイル Web を開発していないのですが、これが必要か、それとももっと良い方法があるか、誰かに教えてもらいたいです。

ディスカッションへの返信（解決策）

サイズの単位として px が一般的に使用されるため、これはあまり明確ではありません。

rem を使ってみると効果が上がるかもしれません

必要ありません

同じフロアにいる人は通常、サイズの単位として px を使用します

モバイル ページのヘッダーは次のようになります:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><meta name="format-detection" content="telephone=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta http-equiv="pragma" content="no-cache" />

Thisずっと気になっていた時間
当初、jsスクリプトで取得した画面幅が実際の幅だと思っていました。
でも実は「デバイスピクセル比」というものがあるのです
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ デバイスピクセル比 devicePixelRatio が簡単に紹介されています

それから私はそれを非常に荒々しく使って復元しました画面の幅を実際のピクセルに換算するには、次の文を使用します:

結果は確かに復元されましたが、悲しいことに、高解像度の小さな画面の携帯電話ではテキストがまったく読めません。
そこで、CSS メディア クエリを使用してさまざまなスタイル シートを記述しましたが、ページ数が多すぎて、さまざまな CSS をまったく記述できないことがわかりました。

私は誰かにアドバイスを求めました。昔のやり方に戻って、ページの一番上に数行書いて、電話が自動的にズームするようにしました。
すべての位置をパーセント位置に戻します
フォント サイズは Web ページと一致する必要があります。たとえば、メイン テキストには 16 ピクセルを使用します。異なる携帯電話の異なる解像度に基づいてメディア クエリを実行する必要はありません。
すべてが簡単です
一部の写真に高さの要件がある場合は、高さではなく幅を定義するだけで、自動的に拡大縮小されます。
特別な要件がある場合は、js を使用してページが読み込まれるのを待ち、幅に基づいて画像の高さを再計算します。

モバイルページのヘッダーは次のようになります:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><meta name="format-detection" content="telephone=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta http-equiv="pragma" content="no-cache" />

この問題は私を長い間悩ませていました
最初は、js スクリプトによって取得される画面の幅が実際の幅であると考えていました。
でも、実は「デバイスピクセル比」というものがあるんです
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ デバイスピクセル比 devicePixelRatio が簡単に紹介されています

それから私はそれを非常に荒々しく使って復元しました画面の幅を実際のピクセルに換算するには、次の文を使用します:

結果は確かに復元されましたが、悲しいことに、高解像度の小さな画面の携帯電話ではテキストがまったく読めません。
そこで、CSS メディア クエリを使用してさまざまなスタイル シートを記述しましたが、ページ数が多すぎて、さまざまな CSS をまったく記述できないことがわかりました。

私は誰かにアドバイスを求めました。昔のやり方に戻って、ページの一番上に数行書いて、電話が自動的にズームするようにしました。
すべての位置をパーセント位置に戻します
フォント サイズは Web ページと一致する必要があります。たとえば、メイン テキストには 16 ピクセルを使用します。異なる携帯電話の異なる解像度に基づいてメディア クエリを実行する必要はありません。
安心してください
一部の写真に高さの要件がある場合、高さではなく幅を定義するだけで、自動的に拡大縮小されます。
特別な要件がある場合は、js を使用してページが読み込まれるのを待ち、幅に基づいて画像の高さを再計算します。

ご回答ありがとうございます。おそらく私の表現はあまり良くありません。あなたが言及したピクセル密度の設定を使用して、フォントサイズを正しく設定できるようになりました。しかし、私の問題はこれではありません
私の現在の状況は次のとおりです
大画面640:


しかし、小さな画面の携帯電話では、フォントサイズが動的に調整されていない場合、フォントサイズはまだ非常に大きいですが、バナー画像が圧縮されているため、フォントサイズはかなり大きくなります


Iわかりません これが問題の見方です

すべての寸法 (% を除く) は em 単位です

すべての寸法 (% を除く) は em 単位です

私のテキストと画像は em 単位になりましたは 100 % です

解決策がわかりませんか?

ユーザーの解像度が変わっても、不快に感じるのは Web ページだけではありません。ユーザーが快適なものに調整すれば、間違いなくそれが変更されます。あなたはまた変わりました。 。 。

エクスペリエンスを見てみましょう。メディア クエリに従ってさまざまな表示効果を設定することは、さまざまな画面サイズで最高のエクスペリエンスを得る方法です

フォント サイズを正しく設定できるようになりました。私はあなたが言及したピクセル密度設定を使用しましたが、私の問題はこれではありません
しかし、小さな画面の携帯電話では、フォントサイズが動的に調整されていない場合、フォントサイズは依然として非常に大きくなりますが、バナー画像が圧縮されているため、フォントが小さく見える
この問題をどう捉えるかわかりません

フォント サイズを変更するには、メディア クエリを使用してください。
または、小さな画面の携帯電話用の写真を適切なものに作り直すようアーティストに依頼することも検討できます。
とにかく、小さいスマートフォンでも大きいスマートフォンでも、はっきりと読める最小のフォントを使用することが私の原則です。