← 解説記事に戻る
ビューポート
rem 実測
テキスト必要長(期待)
行の高さ(実測)
判定

焼きたての香りと共に

至福のホットケーキを

  1. 計測履歴(リサイズ / 回転のたびに追記されます)

この文書自体が問題のLPと同じ構成(100vw連動rem + 縦書き1行1要素の丸角ボックス)です。 縦書き要素の利用可能ブロックサイズは、この文書のビューポート高さ(記事内では埋め込みiframeの高さ)で頭打ちになります。 PCではウィンドウ幅を広げる(幅↑ = 文字↑)と、テキスト必要長がビューポート高さを超えた時点で仕様どおりの列折り返しが起こります。 実機では別タブで開いてデバイスを回転してみてください。 WebKit系(iOS Safari実機)では、回転後に「仕様では説明できない折り返し」(ビューポート高さよりはるかに小さい行の高さ)や、 回転を戻しても直らない挙動が観察できる場合があります。計測履歴で前後の値を見比べられます。