質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1279閲覧

chromeとsafariの表示を一緒にしたい

like-here

総合スコア6

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/01 11:06

編集2021/02/02 02:08

前提・実現したいこと

chromeとsafariで携帯サイズの時の表示の仕方を同じにしたいと思っています。
使っているライブラリは、Bulmaになります。
chromeでの表示の仕方は、画面自体が縮むのに対し、縦に延びるように崩れてしまいました。
これを、統一させる方法はあるのでしょうか?

Safari
safari

chrome
![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

説明と画像がわかりずらくて大変申し訳ないのですが、何か情報いただけるとありがたいです。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/02/01 11:16

両者の論理的な幅は同じなのですか?
like-here

2021/02/01 14:07

同じです! width 414pxになってます
maisumakun

2021/02/01 14:14

どのようなコードを書きましたか?
guest

回答1

0

ベストアンサー

viewportの幅を明示してないのが原因かもしれません。

head要素の中に、以下の1行を入れてみてください。

html

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

投稿2021/02/03 11:08

gpsoft

総合スコア1323

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

like-here

2021/02/05 04:26

ありがとうございます! 大変助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問