12

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

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

これどうやってするの？

4

5 に答える 5

14

あなたが話しているページに文字通りテキストと画像だけが含まれている場合、各 HTML ページで行う必要があるのは次のことだけだと思います。

  1. タグ内に次のビューポート メタ タグを追加し<head>ます。

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

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

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

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

    これにより、すべての画像がアプリの webview のビューポートよりも広くレンダリングされないようになると思います。

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

しかし、あなたの質問は少し一般的すぎます。すべての可能性をカバーする本を書くことになるかもしれません。実際に作業しているコードにもっと具体的にすることはできますか?

于 2013-01-29T10:48:44.950 に答える
3

この手法は、流動的または適応的なレイアウトとして知られています。ここに良い紹介があります

于 2013-01-29T10:33:33.410 に答える
2

メディア クエリは、目的を達成するための最良の方法です。

いつものように 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 */
}
于 2013-01-29T10:30:24.757 に答える
0

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

詳細については、このチュートリアルにアクセスしてください-簡単な手順でレスポンシブデザインを学ぶ

于 2013-01-29T10:36:35.330 に答える
0

ここには多くのオプションがありますが、ほとんどの場合、1 つの質問で詳しく説明することはできません。

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

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