ウェブサイトにサムネイルを追加する

Question

私はイメージギャラリーを構築してウェブサイトを作る方法を学んでいます。

と私が使用しているイメージが大きいですが、私は、サムネイル用のリサイズ画像に置くことができることを実現し、

これらのサムネイルは、モバイルでの鮮明なタブレットで[OK]をクリックしますが、デスクトップ上のぼやけを見500pxなど幅の画像を決めました。
携帯電話とタブレットでは500pxが必要だが、デスクトップでは700pxだと思った。

これで、実行時に2つの間で選択する問題が残ります。

私が理解していることから、私はこの2つの方法を行うことができます。

1. javascriptの画面サイズを確認する（javascriptを使用して（まだこれを行う方法がわかりません））。

2. ユーザーエージェントの文字列「モバイル」を確認し、サーバーを決定します。

他にもいくつかの方法がありますか？ この2つの方法のどちらが優れているのか、欠点が少ないのでしょうか？

私は「2」を推測することはJavaScriptを
無効になっている場合でも、私はPerlのDancer2を使用しています動作しますので、それはどのような方法

Answer 1

に役立ちます場合、私は最良の選択肢がhere示されているようmediaqueriesを使用することだと思う方が良いです

いつでもhtmlに2つのサイズを書き込むことができますが、メディアクエリでは1つしか表示されません。

他の方法では、ウィンドウの高さと幅を取得しているので、クライアントにどのような解像度のWebが使用されているかわかるので、_fullイメージに追加するか、この場合に_lowを追加することができます。

実際のモバイルデバイスの解像度が低い古いPCがあるため、私はUserAgentを使用することをお勧めしません。そのため、ウィンドウのdpi /解像度で作業する方がよいと思います。

あなたがイメージがスケーリングされていませんが、交換されると述べているので、あなたがmediaqueries here

Answer 2

の例をいくつか持っている、私はあなたが画素密度と幅に基づいて異なる画像を定義することができますSRCSETを利用示唆しています。 SitePoint provides a good overview。ここで

はその記事からのサンプルです：

<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />