web-dev-qa-db-ja.com

画像をさまざまなモバイル画面サイズに自動的に調整するHTMLページを作成するにはどうすればよいですか？

別のモバイルデバイスで表示されるHTMLページをいくつか作成したいと考えています。さまざまなモバイル画面サイズに自動的に調整してもらいたい。

HTMLページには、テキストと画像が含まれます。画像は600x450よりも大きい場合がありますが、モバイル画面が（たとえば）280x320の場合、画像はサイズが自動的に調整されてフィットします。

これどうやってするの？

androidhtmlmobile
12
Ekky

あなたが話しているページが文字通りとテキストだけを含んでいるなら、私は各HTMLページであなたがする必要があるすべてはこれだと思います：

  1. これを viewportメタタグ を<head>タグ内に追加します。

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

    これにより、ページが適切なサイズでレンダリングされます。

  2. この<style>タグを<head>タグ内に追加します。

    <style>
img {
    max-width: 100%;
}
</style>

    Ithinkこれにより、すべての画像がアプリのWebビューのビューポートよりも広く表示されなくなります。

    （それが機能しない場合は、代わりにwidth: 100%;を試してください。これにより、すべての画像がビューポートと同じ幅になるため、幅が広くなりません。）

しかし、あなたの質問は少し一般的すぎます。すべての可能性をカバーする本を書いてしまう可能性があります。実際に取り組んでいるコードにより具体的にすることができますか？

12
Paul D. Waite

この手法は、流動的またはアダプティブレイアウトと呼ばれ、優れた導入があります here

3
VahidNaderi

メディアクエリは、必要な操作を行うための最良の方法です。

通常どおりにhtmlとスタイルシートを設定しますが、CSSドキュメントの最後に以下のコードのようなものを使用します。さまざまなデバイスの幅とレイアウトに対してさまざまなクエリを実行する必要がありますが、これで開始できます。

/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}
1
evilscary

ここには多くのオプションがあり、1つの質問で話すのは最も遠い詳細です。

これを行う「自動」方法はありません-手動でコーディングする必要があります。私が考えることができる3つのオプションは、さらに調査が必要になります。

  1. User-Agent httpヘッダーを使用して、接続しているデバイスを識別し、ユーザーを必要なWebサイトテンプレートにリダイレクトします。
  2. JavaScriptを使用して上記と同じことを行います。
  3. CSSを使用して各オブジェクトのサイズを制御します。各オブジェクトを固定値ではなく、画面全体のサイズの割合にすることができます。 CSSは、特定の画面サイズに基づいてスタイルを指定する方法も提供します。 http://www.w3.org/TR/css3-mediaqueries/
0
JAC2703

メディアクエリを使用してレイアウトをレスポンシブにすることができます。つまり、小、中、大のすべての画面を修正します。

詳細については、このチュートリアルをご覧ください- レスポンシブデザインを簡単なステップで学習

0
samir panchal