2

私がクライアント用に作成しているウェブサイトへのリンクは次のとおりです。

http://knowyourheart.co.uk/alisir/diff/

すべてのデスクトップ ブラウザーで問題なく動作しますが、iPhone や小型デバイスで表示すると、正しく配置されません。

これは主に、著作権情報とソーシャル アイコンを含む画像が #map ベースであるため、1200px の画像であるためです。

これを回避する方法はありますか？

大変お世話になりました。

4

1 に答える 1

0

タグの場合<img>(最終的にはこれが望ましい場合があります)、次のように画像の % 幅を設定する必要があります。

CSS:

img{   
   max-width: 100%;
}

要素の場合<area><map>(あなたの場合)、次のように CSS 変換プロパティを使用する必要があります。

CSS (50% 縮小):

area {
   zoom:.5; 
  -webkit-transform: scale(.5);  /* iPhone Safari browser specific */
  -o-transform: scale(.5);
  -moz-transform: scale(.5)"
}

ページの残りの部分も適切にスケーリングするには、他の<div>コンテナーを % 幅に設定する必要がある場合もあります。

ブラウザ ウィンドウの幅を変更するだけで、ラップトップで携帯電話のサイズを簡単にテストできます。コンテンツが最小幅でも表示に収まる場合は、少なくとも携帯電話を水平に持っている場合は問題ありません。

于 2012-05-06T02:50:59.697 に答える