Web ページを携帯電話の画面解像度に適応させる方法_html/css_WEB-ITnose

画面解像度が異なると、作成した Web ページの表示効果が異なるように感じます。Web ページを画面解像度に適応させるための良い方法はありますか?
どれだけ大きくても、レイアウトは変わりません。画面は、ページ全体を拡大または縮小した後のレイアウトです。

試してみてください~ ~

リンクタグを使用します

...
< meta name="viewport" content="width=320px, user-scalable=no, minimum-scale=1">

試してみることができます。

改めて勉強していますが、携帯電話が同時に大きなディスプレイ解像度に対応することはまだ不可能です。結局のところ、サイズはどこにあるのでしょうか?

ui フレームワークを使用するか、レスポンシブ デザインに関する本を読んでください
ui フレームワーク: bootcss

http://www.ruanyifeng.com/blog/2012/05 を参照してください。 /Response_web_design.html

        $(window).bind('resize load', function(){$("body").css("zoom", $(window).width() / 640);$("body").css("display" , "block");});	

2 階さん、ありがとうございます
この段落は、Web ページをアプリケーションに埋め込むために使用されます。埋め込まれた Web ページは常に拡大縮小されます。
Android エンジニアに次の文を追加するよう依頼してください: webSettings.setSupportZoom(false); それでもズームされます。

(実際の解像度サイズの表示を強制するには、この文「target-densitydpi=device-dpi」を追加します)

ページ上のすべてのフォント サイズは特定の幅に基づいています

たとえば、デザイン ページの幅は640、次に異なる解像度のすべての携帯電話、両方とも 640 ピクセルにスケールされます。

2階からこのコードを追加します。これにより、大画面携帯電話の高解像度下でフォントが小さすぎる問題が解決されます。また、画像を切り取る際に、複数の解像度に応じて異なる CSS を考慮する必要はなく、640px のみをサポートするものを使用するだけで十分です。

初めて CSS を書き始めるときは、幅と高さをハードコーディングできないことに気づくはずです。パーセンテージと最大値と最小値の設定を使用する必要があります

この文を追加します

width - ビューポートの幅 height - ビューポートの高さ

initial-scale - 初期値スケーリング率

minimum -scale - ユーザーがズームできる最小比率

maximum-scale - ユーザーがズームできる最大比率
user-scalable - ユーザーが手動でズームできるかどうか

Web サイトを推奨する言っておきますが、私もモバイル Web を自分でやっています。 http://razorflow.com/これはモバイル端末向けに特別に開発された製品です
別の方法は、base.css ファイルを使用することですが、base.css ファイルを使用すると、異なるクライアントで異なるレイアウトを表示できません。

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

2階さん、ありがとうございます

アプリケーションにWebページを埋め込むと、埋め込まれたWebページが常にズームされてしまい、非常に迷惑です。

Android エンジニアに次の文を追加してもらいます: webSettings.setSupportZoom(false); それでもズームされます。

(実際の解像度サイズの表示を強制するには、この文「target-densitydpi=device-dpi」を追加します)
ページ上のすべてのフォント サイズは特定の幅に基づいています
たとえば、デザイン ページの幅は640、次に異なる解像度のすべての携帯電話、両方とも 640 ピクセルにスケールされます。
2階からこのコードを追加します。これにより、大画面携帯電話の高解像度下でフォントが小さすぎる問題が解決されます。また、画像を切り取る際に、複数の解像度に応じて異なる CSS を考慮する必要はなく、640px のみをサポートするものを使用するだけで十分です。

オーナー、私も最近モバイル開発を行っています。これらの 2 つの文は js と head で直接使用できますか?

jqm (jqueryMobile) を見てください。変更できるかもしれません。 ！

れー

2階さん、ありがとうございます
アプリケーションにWebページを埋め込むと、埋め込まれたWebページが常にズームされてしまい、非常に迷惑です。
Android エンジニアに次の文を追加してもらいます: webSettings.setSupportZoom(false); それでもズームされます。

(実際の解像度サイズの表示を強制するには、この文「target-densitydpi=device-dpi」を追加します)
ページ上のすべてのフォント サイズは特定の幅に基づいています
たとえば、デザイン ページの幅は640、次に異なる解像度のすべての携帯電話、両方とも 640 ピクセルにスケールされます。
2階からこのコードを追加します。これにより、大画面携帯電話の高解像度下でフォントが小さすぎる問題が解決されます。また、画像を切り取る際に、複数の解像度に応じて異なる CSS を考慮する必要はなく、640px のみをサポートするものを使用するだけで十分です。

しかし、この方法には問題があります。Firefox と Opera はZoomをサポートしていません。他のモバイルブラウザでのZoomのサポートはまだ決定されていません

試してみましょう~~

ありがとうございます〜〜〜