iPhone、Androidでの表示の差異を修正する

AndroidとiPhoneのブラウザでの差異を修正したい時。

【手段その1】

BODYの直下に下記コードを記載して、アンドロイドで閲覧した場合のみClassに”Android”と追記する。

<script>
if(/Android/.test(window.navigator.userAgent)){
 document.getElementsByTagName("body")[0].setAttribute("class","android");
}
</script>

【手段その2】

iPhone用にCSSを書く。

なぜかというと、

@media screen and (max-device-width: 480px) {
 #fblogo{
   left: 155%!important;
  }
}

この記述方法だと、Androidも反応してしまうので、 この記述方法はAndroid用にして、iPhone用には別途スタイルシートを読み込む方法で記述する。

Iphone用スタイル方法

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

上記はまだ使ったことはない…(*´∀｀)