IE6以来のつらさがある
そもそもの話
iPhoneのブラウザ（Safari）はバグというか不具合というか仕様というかがあって、微妙に扱いづらい。
当初からiframeがダメくさいってのが言われていた。「iPhone iframe」とかで検索したら腐るほど出てくるんだけど、うまいこと組んだら大丈夫というよりは仕様に合わせて組むしかないよねって感じで、単純に言って通常の倍くらい手間のかかるレスポンシブデザインを組んだ後に修正に追われて泣きを見た人は多いんじゃないかと思う。
新機種が出てbreakpointに悩まされたりとか、そうでなくとも横位置どうすんだよこれみたいな、web専門というよりはiphone専門の知識をつけないとやべえぞこれって感じのがある。
つらい。
今回のケース
tableを組んでレスポンシブに対応させる必要があった。
theadを使ってるし、tbodyでもth使ってるんで構成を変えることができなくて、だからoverflow-x:autoと絡めて横スクロールで補完するっていう、今ではよくある感じのやつを導入した。
これの応用って感じで。
で、それは問題なくできたんで実機確認に移った。
ページ上の複数箇所に、横スライドするtableを仕込んである。PCとスマホではブラウザの幅を合わせてフォントも合わせても微妙に差異が出るんで、勝手に改行されちゃかっこ悪いからなーって気持ちだった。
1つ目のtableのtbody内のtr > *:last-childに当たるやつのフォントサイズがでかい。指定サイズにならない。無理やり小さいサイズを指定したら逆にでかくなった。
原因はoverflow-xをしていした親要素のwidth周りにあった。記述を削除したらフォントサイズが言うこと聞くようになったけどそれじゃダメだし、他の部分はそもそも正常だし、なんだよこれっていう。
-webkit-text-size-adjust
調べたらこれでなんとかなるらしい。
この記事の通りにやったけどダメだった。
解決
この記事に倣ってみたらできた。記載箇所が良くなかったらしく、bodyじゃなくてフォントがおかしいところに記載したら正常になった。
たった1行足すだけに1時間くらいかかってつらかった。
コメント