ユーザーの帯域幅に応じてレスポンシブ画像を表示するために hisrc メソッドを使用したいと思います。iPhone 4sでもデスクトップでファイルをテストしましたが、大きな画像ではなく、デフォルトの小さなsrc画像が表示されています。コードが機能しない理由である可能性があるものをコードで確認できますか? ありがとう
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml"/>
<meta name="HandheldFriendly" content="True" />
<title>Gifts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="xhtml2gradientjava1.css" type="text/css" charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="hisrc.js"></script>
<script type="text/javascript">
$.hisrc.speedTest();
$(document).ready(function(){
$(".products").hisrc();
}
</script>
</head>
<body>
<div id="content">
<img class="products centre" src="images/bracelet_opt.jpg" data-1x="images/br0266_300x300.jpg" data-2x="images/br0266_300x300.jpg" />
<div class="box_desc"><h3>Silver Beaded Heart Bracelet</h3><p>Ref: #BD0266</p>
<div class="description">
<h4>Description</h4>
<p>Beaded Heart Bracelet by Newbridge Silverware. Silver plated heart detail bracelet with a protective anti tarnish layer, presented in a Newbridge Silverware gift box.</p> <h5>Dimensions:</h5> <p>240mm in length and 5mm in width.</p>
</div>
</div>
</div>
</body>
</html>
また、データ 1x とデータ 2x の両方を含める必要があるかどうか疑問に思っていました。画像の一部については、300x300 が最大です。このサイトは携帯電話向けですが、タブレットや iPad 向けではありません。ありがとう