Android and iPhone word-break

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

長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon

手持ちで実験した結果こうなった。
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 */
}

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

IMG_0053

すべては .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 で表示確認していないけど多分大丈夫だろう。