おしえて

ios上のブラウザ(safari,chrome)での表示がおかしいです

解決済

質問者：maninofu
質問日時：2020/12/05 17:05
回答数：1件

ios 14.2のchrome version87.0.4280.77とsafari(最新)で、以下のindex.htmlを表示させたところ
本来であれば、４つの正方格子が表示されるところ、高さ方向が潰れて表示されます。

なお、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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： kikyuuu
回答日時：2020/12/05 19:43

Safariは不具合が多く互換性が低いです。

ChromeもiOS版はAppleがブラウザを規制しているため、Safariで表示して、UIやお気に入りなどのHTML表示意外の部分を使えるというだけです。
恐らくは■の高さがうまく認識できていないと思われますが、デバッグしないとわからないです。

Android版、PC版のChromeはもちろん、
PC版なら標準のEdgeでも問題なく表示できるかと思います。