css | Paepoi Blog

前回 table タグを使わない方向にすると書いたけど
iPhone で table タグ内の英文を強制改行させる方法をみつけた。

手持ちで実験した結果こうなった。
word-break: break-all で iPhone 強制改行。
word-wrap: break-word で Android 強制改行。

body {
	-webkit-text-size-adjust: 100%;
	word-break: break-all; /* iPhone */
	word-wrap: break-word; /* Android */
}

しかしこんなのは使うなということらしい。
だがそれは英文での話、コマンドやソースコードは強制改行してほしい。

すべては .NET Framework の長すぎるメソッド名が悪い。
Linux 屋なら端末で長いコマンドが折り返されることに慣れているしね。

更に viewport は

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />

これで iPhone でも拡大は可能で横向き時に文字拡大されなくなる。
-webkit-text-size-adjust: 100%; という上記の CSS 指定も必要だけど。

maximum-scale=1.0,user-scalable=no

とよく見つかる、これを指定すると拡大できなくなるので場合による。
スマホ重視なサイトなら拡大しなくても使い易いレイアウトにすればいい。

ついでに、これは以前から指定していたけど

img {
	max-width: 100%;
	height: auto;
}

としておくと縮小画像を用意しなくても自動で縮小表示される。
大半を縮小画像に入れ替えた後に知ってションボリした思い出。

とにかく iPhone 対応は一段落。
IE つか Windows で表示確認していないけど多分大丈夫だろう。

先月スマホを 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 を色々弄ってみたけどどうにもならない。

検索したら、筆者の設定が悪いのではなかったのか！
-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 の微調節。

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

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

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

Paepoi Blog