そのため、リンクなどを作成するためにイメージ マッピングを使用するモバイル Web サイトがあります。画像は640X960です。Galaxy S4でテストしています。
HTML
<img src="mobilelandscape.png" usemap="#Mapland" border="0" class = "landscape" />
<map name="Mapland" id="Mapland">
<area shape="rect" coords="532,286,879,468" href="contact.php" alt="Contact Us" />
<area shape="rect" coords="398,497,930,685" href="index.php" alt="My account" />
<area shape="rect" coords="382,696,907,870" href="newcust.php" alt="New Customers" />
</map>
CSS
.landscape{
display:block;
width:100%;
}
body{
overflow:auto
}
基本的に、画像が画面に収まると、画像全体が表示されず、上部だけが表示され、残りの部分が切り取られているように見えます。下にスクロールして画像の残りの部分を表示する方法はありません。画像の高さを に設定しないとheight:100%
、この特定の問題に対処するものを見つけることができないようです。誰にもアイデアはありますか?