先月スマホを iPhone 5S に乗り換えた。
Safari だと自分の本サイトが滅茶苦茶に表示されると気が付いた。

そろそろ CSS に手をつけないと。
このブログ側は問題ないのでこの CSS を参考に。

まず全体の英字フォントが selif になる。
table 部の折り返しができず縮小表示になる。
pre で文字列が折り返さずトンデモ状態に。
chrome や firefox で問題なかった margin 指定で酷い表示状態に。

特に SyntaxHighlighter は深刻だ。
何がどうなったらこんな酷いことになるんだよと。

英字フォントは全体に font-family: sans-serif; 指定で普通にいける。
SyntaxHighlighter には適用されないので shCore.css に指定。
でも滅茶苦茶なフォントサイズなのは変わらない。

SyntaxHighlighter 2.1.364 を使い続けていたけど 3.0.83 に変更。
配布元にいったけどよくわからなかったのでバックアップを探して適用。
旧版では swf だしタッチパネルじゃ選択し辛いのでコレのほうがいいね。

ちょっぴり良くなったけどフォントズレは変わらない。
CSS を色々弄ってみたけどどうにもならない。

Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決

検索したら、筆者の設定が悪いのではなかったのか！
-webkit-text-size-adjust: 100%; を入れただけで普通になった。

おまけで shBrushJScript.js の内容を変更。
print, prototype, imports を色分けするように、そう Gjs 用。

shCore.css は overflow: auto !important; でスクロールに。
通常の pre は折り返すというように CSS を指定。

pre {
	border: 1px solid #7c93b2;
	font-family: monospace;
	white-space: pre-wrap;
	word-wrap: break-word;
}

margin は pt 指定していたけど px 指定に変更。
Retina ディスプレイなのが関係あるのかな。
他チマチマと CSS の微調節。

css – Word-wrap in an HTML table – Stack Overflow

これで iPhone でもテーブルからハミ出さなくなった。
と思ったらパソコンで見ると横幅一杯に広がってカッコワルイ。
これは元通りにして今後の課題ということにしておこう。
とはいえ、ぶっちゃけ table タグを使わない方向にするしかなさそう。

他に何をやったかな？覚えていないや。
とにかく iPhone Safari でもゲンナリしない程度にはできたぞと。

Internet Explorer のみ表示確認すればいい時代があったのだけどな。
新たに Web ページ作成を勉強し始める若い人は大変だ。