CSSでMovable Typeをスマートフォンに対応させる その2

スタイルシートの追加

スマートフォンは表示領域が小さく、pre要素とcode要素からはみ出した内容が表示されないままなので、次のスタイルを追加しました。

何のためのpre要素かわかんなくなりますが、スマートフォンの場合、ブロック要素からはみだした内容を、スクロールバーを表示させることで、すべて見るというインターフェイスがないので、やむを得ないのです。

pre {
  white-space: pre-wrap;
}
 
code {
  white-space: pre-wrap;
}

table要素も、

table {
  word-break: break-all;
  overflow: auto;
}

を追加して、無理やり改行してます。

アドレスバーを見えなくして表示領域を広げる

【2017-11-01 追記】
アドレスバーを見えなくして表示領域を広げる処理は削除しました。

スマートフォンは、画面サイズが狭いので、アドレスバー見えなくして表示領域を広げるようにしているサイトが多いようです。アドレスバーが見えないことに抵抗がないではないのですが、問い合わせフォームやコメントフォームがあるページは、アドレスバーはそのままにしてあります。

iPhone/Androidブラウザのアドレスバーを隠す方法 | altに記載の方法でおこないましたが、、jQueryは使わず、window.onloadで対処しました。

アドレスバーそのものを消してしまうわけではなく、画面をスクロールすると、アドレスバーが隠れるという、スマートフォンの仕様を利用しているわけです。

<script type="text/javascript">
/* <![CDATA[ */
window.onload = function() {
  if( (navigator.userAgent.match(/iPhone/i)) ||
    (navigator.userAgent.match(/iPod/i)) ||
    (navigator.userAgent.match(/iPad/i)) ) {
      setTimeout(scrollTo, 100, 0, 1);
    }
  else if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,1);
  }
}
/* ]]> */
</script>