3

幅 1600px の画像を表示すると、正しく表示されます。しかし、たとえば幅が 1920px の画像を表示すると、Safari はそれをかなり小さく表示します。

私が使う：

<!-- in the header -->
<meta name="viewport" content="width=device-width;" />

<!-- correct -->
<img src="content/dummy/brand_backgroud_1600_1.jpg" alt="">

<!-- to small -->
<img src="content/dummy/brand_backgroud_1920_1.jpg" alt="">

メタタグで全体の幅を設定せずに、これを修正するにはどうすればよいですか?

これは、iOS 5.1 を搭載した iPhone と iPad の両方で発生します。

編集: この最も単純なhtmlページでも:

<!DOCTYPE html>
<html lang="de">

<head>

    <meta charset="UTF-8" />

    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <title></title>

</head>

<body>

    <img src="content/dummy/brand_backgroud_1920_1.jpg" alt="">
    <img src="content/dummy/brand_backgroud_1600_1.jpg" alt="">


</body>
</html>

私はこの結果を得ます：

ここに画像の説明を入力

4

1 に答える 1

5

1 つの方法は、画像の幅を「100%」、高さを「自動」に設定することです。こうすることで、ピクセル幅に関係なく、すべての画像が親コンテナーの幅いっぱいに表示されます。これは実際、Retina をサポートするための巧妙なトリックでもあります。

編集：わかりました、今私はあなたが言っていることを理解しています。ユーザーにフルサイズの 1600 または 1920 の画像を表示したいが、iOS に拡大縮小させたくない。

編集＃2：だから私はいくつかの異なることを試しました-あなたは正しいです. iOS は、画像サイズが特定の px 値を超えると、幅または高さが明示的に設定されていない画像を「スケーリング」しているように見えます。それらを明示的に設定すると、期待どおりに機能します。現時点では、それが唯一の解決策のようです。

<img src="image_1600.jpg" alt="" style="width: 1600px; height: auto" />
<img src="image_1920.jpg" alt="" style="width: 1920px; height: auto" />
于 2012-06-27T13:37:45.203 に答える