サイトでアマゾン商品プレビューを利用すると左右に余白がつく。

前回はamazon商品プレビューのjavaスクリプトを読み込ませるとcssでid="navbar"と指定した場所が乱れることを書きましたが、今回もうひとつ問題を見つけました。

iPod touchやAndroido端末で表示を確認していたらどうも指定していないはずなのに内容表示全体の左右にすこし余白が追加れてました。例によってchoromeの機能である「要素を検証」で調べたところやっぱりamazon商品プレビューのjavaスクリプトによってbodyタグの左右にマージンを指定するcssが効いていたのでした。

↓こんなことしてたのです。

body {
  margin: 0 8px !important;
}

PCのブラウザで見る分にはたいして問題になりませんけどiPod touchやiPhoneやAndroid端末では画面が小さく狭いですから左右の8pxずつは気になります。
携帯端末ではマウスカーソルをリンクの上にのせるということはできないのでamazon商品プレビューを有効にしても意味がありません。よって携帯端末(user agentで判断)ではamazon商品プレビューのスクリプトは読み込ませないように修正しました。

これで期待通りの表示ができるようになりました。