css更喜欢先前代码的媒体查询

Question

所以我做了一些网格布局工作，想在这个媒体查询中改变它：

@media(min-width: 700px){
#container{
    grid-template-rows: 320px;
    grid-template-columns: 320px 320px;
    justify-content: center;
    align-content: center;
}
#left{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
#right{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
}

如果我在普通浏览器中打开页面，它可以工作，但如果我检查元素或在我的Iphone上显示它，它只显示媒体查询版本。

这是在线页面的链接： link to page

Answer 1

如果你去caniuse.com它会提到一个已知的bug

“Safari尚不支持网格属性（如网格模板行）的内在和外在大小调整”

可能你的问题？