Q&A
両者の論理的な幅は同じなのですか？
前提・実現したいこと
chromeとsafariで携帯サイズの時の表示の仕方を同じにしたいと思っています。
使っているライブラリは、Bulmaになります。
chromeでの表示の仕方は、画面自体が縮むのに対し、縦に延びるように崩れてしまいました。
これを、統一させる方法はあるのでしょうか？
Safari
chrome
]
ソースコード
html
1<!--上の2つのタイル --> 2<div class="tile is-ancestor is-flex-mobile"> 3 <div class="tile is-parent"> 4 <article class="tile is-child notification has-background-link is-info"> 5 <p class="title">Middle tile</p> 6 <p class="subtitle">With an image</p> 7 <figure class="image is-4by3"> 8 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 9 </figure> 10 </article> 11 </div> 12 <div class="tile is-parent"> 13 <article class="tile is-child notification has-background-link is-info"> 14 <p class="title">Middle tile</p> 15 <p class="subtitle">With an image</p> 16 <figure class="image is-4by3"> 17 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 18 </figure> 19 </article> 20 </div> 21 </div> 22 23<!--中の3つのタイル --> 24 <div class="tile is-ancestor is-flex-mobile"> 25 <div class="tile is-parent"> 26 <article class="tile is-child notification has-background-link is-info"> 27 <p class="title">Middle tile</p> 28 <p class="subtitle">With an image</p> 29 <figure class="image is-4by3"> 30 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 31 </figure> 32 </article> 33 </div> 34 <div class="tile is-parent"> 35 <article class="tile is-child notification has-background-link is-info"> 36 <p class="title">Middle tile</p> 37 <p class="subtitle">With an image</p> 38 <figure class="image is-4by3"> 39 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 40 </figure> 41 </article> 42 </div> 43 <div class="tile is-parent"> 44 <article class="tile is-child notification has-background-link is-info"> 45 <p class="title">Middle tile</p> 46 <p class="subtitle">With an image</p> 47 <figure class="image is-4by3"> 48 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 49 </figure> 50 </article> 51 </div> 52 </div> 53 54<!--下4つのタイル --> 55 <div class="columns is-mobile "> 56 <div class="column "> 57 <p class="title">Middle tile</p> 58 <p class="subtitle">With an image</p> 59 <figure class="image is-4by3"> 60 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 61 </figure> 62 </div> 63 <div class="column "> 64 <p class="title">Middle tile</p> 65 <p class="subtitle">With an image</p> 66 <figure class="image is-4by3"> 67 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 68 </figure> 69 </div> 70 <div class="column "> 71 <p class="title">Middle tile</p> 72 <p class="subtitle">With an image</p> 73 <figure class="image is-4by3"> 74 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 75 </figure> 76 </div> 77 <div class="column "> 78 <p class="title">Middle tile</p> 79 <p class="subtitle">With an image</p> 80 <figure class="image is-4by3"> 81 <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png"> 82 </figure> 83 </div> 84 </div> 85
説明と画像がわかりずらくて大変申し訳ないのですが、何か情報いただけるとありがたいです。。
同じです！
width 414pxになってます
どのようなコードを書きましたか？
コードを記載しました！
BulmaというライブラリのTileというレイアウトを使っています！
なのでcssは記述していないです！
BulmaのTile
https://bulma.io/documentation/layout/tiles/
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
