ios 14.2のchrome version87.0.4280.77とsafari(最新)で、以下のindex.htmlを表示させたところ
本来であれば、4つの正方格子が表示されるところ、高さ方向が潰れて表示されます。
なお、pcのほとんどのブラウザでは、意図した表示になっております。
サイトにもアップしておきます。 https://atxrtc.firebaseapp.com/
おわかりになる方、おしえてください。
以上、よろしくおねがいします。
------------------- index.html -------------------
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<body style='background:#797979'>
<div class="grid-wrap">
<div class="grid"><a class="cell"></a><a class="cell"></a><a class="cell"></a><a class="cell"></a></div>
</div>
</body>
<style>
.grid-wrap{
position:relative;
width:100%;
}
.grid-wrap:before{/*1:1*/
content:"";
display:block;
padding-top:100%;
}
.grid{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:grid;
grid-template-rows:repeat(2,1fr);
grid-template-columns:repeat(2,1fr);
background-color:#0;
}
.cell{
width:100%;
height:100%;
border:1px solid #fff;
}
</style>
</html>
No.1ベストアンサー
- 回答日時:
Safariは不具合が多く互換性が低いです。
ChromeもiOS版はAppleがブラウザを規制しているため、Safariで表示して、UIやお気に入りなどのHTML表示意外の部分を使えるというだけです。
恐らくは■の高さがうまく認識できていないと思われますが、デバッグしないとわからないです。
Android版、PC版のChromeはもちろん、
PC版なら標準のEdgeでも問題なく表示できるかと思います。
回答ありがとうございます。m_m
iosのsafariでは、%で指定する部分が多すぎると、崩れることがわかりました。
固定できるところは固定で指定し、とりあえずsafariでも機能するように対処しました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
インデントがずれてしまいます。
-
htmlの文字が縦書きになる
-
CSSのホバーエフェクト
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
2個のFormを横並びにしたい
-
リストマーカーをボックス内に...
-
widthやheightの数値に単位(px...
-
html タグの閉じスラッシュ前の...
-
Macで画像の切り抜きできないの?
-
双方向リスト
-
横スクロールサイトの中央寄せ
-
HRタグ 枠線を透明にするには?
-
配列の要素をまとめて比較したい
-
CSSで3分割した背景画像を配置...
-
複数のボタンを等間隔に、かつ...
-
なぜ?マウスオーバーで1pt位置...
-
HTML属性での「""」 「''」違い
-
ASP.NETでプレーンなページに文...
-
機種依存文字、m2(平方メート...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ios上のブラウザ(safari,chrome...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
<h1>、<h2>と<p><div>の行間を...
-
HTML属性での「""」 「''」違い
-
超音波で洗脳。
-
widthやheightの数値に単位(px...
-
ボタンをセル内一杯に表示させ...
-
div要素が重なってします
-
リストマーカーをボックス内に...
-
質問1.
-
<div id="container">の使いか...
-
リンクを知らせる手のマークが...
-
画像イメージの上下左右、欲し...
-
smallにtext-allignが効かない
-
複数のボタンを等間隔に、かつ...
-
css初心者 フレックスボックス...
-
含む含まないという概念自体の...
-
idの中のid指定
おすすめ情報