掲示板が新しくなりました
閲覧のみなら登録は不要です。書き込みをする際に登録が必要になります。
旧掲示板をご利用のユーザー様も、書き込みをする際は、お手数ですが新規登録からお願い致します。
（※土日祝は、掲示板サポートはお休みさせて頂きます）
旧掲示板をご利用のユーザー様も、書き込みをする際は、お手数ですが新規登録からお願い致します。
（※土日祝は、掲示板サポートはお休みさせて頂きます）
解決済み
スマホを横に向けて表示させると縦に長い文字で表示される
カテゴリ：静的htmlテンプレサイト（Template Party）
https://template-party.com/template/tp_wa2/tp_wa2_white_black/manual_list_free.html
こちらのテンプレートを使っています。
他のデバイスは問題ありませんが、iPhoneの画面を横に向けたときだけ、テキストが縦長になってしまいます。5文字程度で改行されてしまい読みにくいです。改善できないでしょうか？
回答（1件）
こちらのiPhoneでも問題確認しました。
cssフォルダのstyle.cssの、
.list-freeの一通りの指定がある一番最後に、以下を追加して下さい。
/* ----------------------------------------------------
iPhone横向き等「幅は600px以上でも高さが低い」端末はスマホ表示に戻す
---------------------------------------------------- */
@media screen and (min-width:600px) and (max-height:500px) and (orientation: landscape) {
/* list-freeをスマホ（縦並び）に戻す */
.list-free {
flex-direction: column;
}
/* h3は横書きに戻す（縦書き解除） */
.list-free h3 {
writing-mode: horizontal-tb;
text-orientation: mixed;
padding: 0 1rem;
}
/* PC向けの幅指定をスマホ同等に戻す */
.list-free .w1,
.list-free .w2 {
width: 100%;
}
/* PC向けの並び替えや余白指定をスマホ同等に戻す */
.list-free .order1,
.list-free .order2,
.list-free .order3 {
order: 0;
}
.list-free .mt1,
.list-free .mt2 {
margin-top: 0;
}
}
サンプルは以下です。
https://template-party.com/bbs_sample/2026/bbs11/
flexレイアウトを色々試している当初のテンプレなのでちょっと使いづらかったかもしれません。
今は複雑な構造にはgridを使うようにしているので、もう少し使いやすいものを中心に配布できると思います。
当スレッドの受付は終了しました