通常 PC の表示をそのままに、Seesaa のスマートフォンページと、スマートフォンからPC ページを表示した時に、実際に見やすいように最適化しました。その為、スマートフォンから見た場合、PC ページでも右サイドは表示されません。横向けで見ると無理なく文字が見えるものと思われます。
右端に余裕があるのは、AssistiveTouch 用で、この余裕の部分を使っていずれ自前のコントロールも作ろうかと。
スマートフォンページの場合は、画像を幅 290px に変更して表示するようにしました。また、スマートフォンページでも SyntaxHighlighter が表示できるようにしています。
( Android はまだチェックしていません )
当ブログでは、SyntaxHighlighter を使っている事もあり、PRE を多用している為、改行されずにはみ出る事がスマートフォンで見られましたが、いずれにせよ以下のコードで対応できるようです。
pre {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
}
PC 側には以下のようなコードを使用しています
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
str="";
str+="<style type=\"text/css\"> \n";
str+=" \n";
str+=".iphide { \n";
str+=" display:none; \n";
str+="} \n";
str+="#links { \n";
str+=" display:none; \n";
str+="} \n";
str+="#container { \n";
str+=" width:940px!important; \n";
str+="} \n";
str+="#content { \n";
str+=" width:930px!important; \n";
str+="} \n";
str+=".text pre { \n";
str+=" width:auto!important; \n";
str+="} \n";
str+=".text div { \n";
str+=" width:auto!important; \n";
str+="} \n";
str+=" \n";
str+="</style> ";
document.write(str);
}
</script>
スマートフォン側はには以下のようなコードを使用しています
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
str="";
str+="<style type=\"text/css\"> \n";
str+=" \n";
str+=".iphone { \n";
str+=" width:290px!important; \n";
str+="} \n";
str+=".text img { \n";
str+=" width:290px!important; \n";
str+="} \n";
str+=".text pre { \n";
str+=" width:auto!important; \n";
str+="} \n";
str+=".text div { \n";
str+=" width:auto!important; \n";
str+="} \n";
str+=" \n";
str+="</style> ";
document.write(str);
}
</script>