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;
}
を追加して、無理やり改行してます。
アドレスバーを見えなくして表示領域を広げる
スマートフォンは、画面サイズが狭いので、アドレスバー見えなくして表示領域を広げるようにしているサイトが多いようです。アドレスバーが見えないことに抵抗がないではないのですが、問い合わせフォームやコメントフォームがあるページは、アドレスバーはそのままにしてあります。
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>
コメント