0

現在、私のウェブサイトは、そこにある完全な画像が読み込まれ、画面に合わせて自動的にサイズ変更されるように設定されています。これは、CSS で画像の幅を 100% に設定することによって行われます。うまく機能しますが、画像タグ自体で幅と高さを指定していないため、標準に準拠していないようです。

私のアイデアは、同じ Web ページの複数のバージョンを作成することです。唯一の違いは画像のサイズです。各画像には独自のファイル名があります (image1small.jpg、image1medium.jpg など)。

問題は、ほとんどの人がすぐに全体像を見たいと思うことですが、画面が小さい人は全体を見るために水平方向にスクロールする必要があるため、これはうまくいきません。

画面の基準を満たさないユーザーをより適切なサイズの画像のページにリダイレクトする JavaScript を上部に配置することを考えていました。このようなもの：

<html>
<head>
<script>
    if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>

問題は、ページの画面解像度要件を満たしていないユーザーに対してページ リダイレクトが発生することです。これが Google への不正なリダイレクトと見なされるかどうかはわかりません。

上記のようなコードを使用して、互換性のない画面サイズのユーザーを正しいページにリダイレクトすることは良い習慣ですか? または、正しいサイズの画像をユーザーに表示するために別のアプローチを取る必要がありますか?

そして、誰が答えようと、画像タグの幅と高さの属性を指定する必要があると感じています。HTML 4.01 の厳格な標準に固執して、ページが誰にとっても機能するようにしたいと考えています。

4

1 に答える 1

0

HTML 5 標準の最初のドラフトは、すべての人に役立つように設計されました。基本的には、ブラウザーが何をすべきかではなく、「ブラウザーが実際に何をするか」を文書化したものです。

幅と高さの属性を指定する理由は、画像が読み込まれる前でもページ上のスペースを確保し、画像が読み込まれたときにコンテンツを再フローする必要がないようにするためです。

属性を指定することを選択してからページをリダイレクトすると、属性なしで % width を使用するよりも悪い再レンダリングが発生します。ですから、あなたの薬は病気よりも悪いので、あなたの懸念は根拠がないと思います.

さまざまなサイズの画像をサーバーに表示したいという要望は、レスポンシブ画像の使用例の 1 つであるため、ページをリロードするのではなく、オプションとして検討することができます。幅広いブラウザー サポートを提供するいくつかのフォールバックがあります。

于 2015-10-23T22:57:06.870 に答える