Q&A
提示のコードには<!DOCTYPE html>がありませんが、本来のコードには入っていますか？
縦書きのレイアウトでちょっと理解できない現象にあたってします。
iPhoneで見たときに
フォントサイズが一部だけ意図せず変わってしまいます。
どうしてそうなるのか？どうやったらフォントサイズが変わらないように出来るのかを解決したいとおもっています。
現象は．．分かりにくいですが
div要素の中身を縦書きにして．．
その中にいくつか<p>要素で文字列が入っているとします。
PCで見ても特に疑問はありません
iOS（iOS10 iPhone7のSafari）で見たときだけ，以下のようになります。
<p>要素の中に文字列がある程度以上長いものが2個以上含まれている時，長い文字列の<p>要素だけフォントサイズが大きく表示されます。長い文字列の<p>要素が１つだけなら，フォントサイズは変わりません
短い文字列の<p>要素が沢山あっても，フォントサイズは変わりません
ある程度以上の長さの文字列（を含む<p>要素）が2個以上にになったときにフォントサイズが変わります。
サンプルのコードです
<html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> div { writing-mode: vertical-rl; width: 100%; overflow: scroll; font-size: 1rem; } </style> </head> <body> <div> <p>段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１段落１</p> <p>段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２段落２</p> <p> 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ 段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３段落３ </p> </div> </body> </html> コード
この状況で，iPhoneで表示すると下のように．．段落２（表示されていませんがスクロールすると段落３も）フォントサイズが大きくなります。
段落3または段落2の文字列を少し削ると．．ちゃんと同じサイズで表示されます。
PCでは意図した通りの表示です。
どうしてそうなるのか？
どうやったら同じサイズで表示できるのかがわからずにいます。
よろしくお願いします。
回答2件
0
ベストアンサー
text-size-adjust: 100%;はどうでしょう？
投稿2018/08/25 08:15
総合スコア1284
縦書き・横書きに関係なく，設定しておくと安心なので，bodyとかに書いておくと良いです
解決しました！
記事の方も読ませていただきました。cssの仕様としてなるわけではなさそうですね。
不具合というか．．なんというか．．．
ひとまず
-webkit-text-size-adjust: 100%;
を入れた来とした表示になり，PCの方でも特に変わらず見られました。
ありがとうございました。
0
ベンダープレフィックスを付けてみてはどうでしょうか？
投稿2018/08/25 06:05
総合スコア3525
あなたの回答
tips
プレビュー
