Q&A
ちょっと試してみましたが、スマホのChromeだと何か下に変な空白がにょきにょき伸びますね……
○ Win8.1 + Chrome（92.0.4515.159）通常モード
× Win8.1 + Chrome（92.0.4515.159）デベロッパーツール使ってスマホモード
○ Win8.1 + FireFox（91.0.1 ）PCモードもスマホモードも
× Android９＋ Chrome（92.0.4515.131）
○ iOS14.7.1 + Safari
前提・実現したいこと
writing-mode: vertical-rl;をつかった縦書きのサイトです。
スマホでも画面いっぱいに表示したいです。(改行位置を画面下端に)
イメージ↓
発生している問題・エラーメッセージ
PCで表示すると何も問題ないのですが、スマホ(デベロッパーツール上)で表示すると、なぜか下に余白ができてしまいます。
イメージ↓
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 (略) 5 </head> 6 <body> 7 <div id="enclosure"> 8 本文(略) 9 </div> 10 </body> 11</html>
CSS
1#enclosure { 2 writing-mode: vertical-rl; 3}
試したこと
CSS
1#enclosure { 2 position: absolute; 3 right: 0; 4 writing-mode: vertical-rl; 5}
余白は消えたものの、スクロールができなくなってしまいました。
補足情報
Windows10 / Chrome 最新版
設定：Galaxy S5 ( 640 x 360 )
初質問のためわかりにくかったらすいません。
コード全文
実際のものとは違いますが同じ症状が出るものを。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 html { 8 font-size: 64pt; 9 } 10 11 #enclosure { 12 writing-mode: vertical-rl; 13 } 14 15 .content { 16 border: 1px #000 solid; 17 padding: 10px; 18 margin: 10px; 19 box-sizing: border-box; 20 } 21 </style> 22</head> 23<body> 24 <div id="enclosure"> 25 <div class="content"> 26 あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 27 </div> 28 <div class="content"> 29 いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん 30 </div> 31 </div> 32</body> 33</html>
Chromeのバグっぽい感じがしますね。
https://new.crbug.com/ から英語でバグをレポートしましょう。
ブラウザによって挙動が異なるということで、
他のブラウザでも試したところ、MicrosoftEdge, GalaxyBrowser (両方Chromiumベース) でも同じ症状が発生したことを踏まえ、Chrome特有のバグと判断することにしました。
アドバイスありがとうございました。
回答1件
0
原因
恐らく、Chromeのバグ。
したこと
- バク報告
妥協案1
スマホは横書きにすることで問題を根本から回避
JavaScript
1if(navigator.userAgent.indexOf("Windows") >= 0 || navigator.userAgent.indexOf("Macintosh") >= 0) { 2 // PC用CSS読み込み 3} else { 4 // モバイル用CSS読み込み 5 // 横書きにすることで問題を根本から回避 6} 7
妥協案2
横スクロールをあきらめる
CSS
1#enclosure { 2 width: 100vw; 3 column-width: 80vh; 4 column-gap: 2em; 5 column-rule: 1px #999999 solid; 6}
妥協案3
1と2の合わせ技で、スマホだけ縦スクロールもあり
なるべく横スクロールが良かったので、自分はこれを採用。
投稿2021/08/20 07:14
総合スコア0
あなたの回答
tips
プレビュー
