【发布时间】：2021-10-31 15:28:19
【问题描述】：
我的页面无法在 iPhone 上运行。我认为问题出在网格布局上，但无论如何我都无法修复它。
这是我的页面的模拟
iPhone X : https://prnt.sc/s1v2bo
iPhone 8 : https://prnt.sc/s1v2u0
但它不适用于我的手机 (iPhone 8)
好像是这样的：https://prnt.sc/s1v3wy
我对此进行了很多研究，我也添加了此代码。
<meta name="viewport" content="width=device-width, initial-scale = 1.0>"
此页面适用于 iPhone 除外。
我在三星 A50 上试过，它可以工作。
它也不适用于 iPhone X。 iPhone有一个问题。
问题是它在具有原始分辨率的 Chrome 和 Opera 移动模拟器中正常工作。但是在 iPhone 中，我无法理解是什么问题。
这是媒体查询代码：
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 375px),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (-webkit-min-device-pixel-ratio: 2) {
html {
zoom: 85% !important;
}
.letter {
border-right: 2.95px solid rgb(250, 72, 72);
border-left: 2.95px solid rgb(250, 72, 72);
border-bottom: 2.95px solid rgb(250, 72, 72);
}
.container-fluid {
font-size: 12px !important;
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
width: 441px !important;
zoom: 100% !important;
height: 50px !important;
}
.navbar-nav {
width: 375px !important;
}
.navbar-fixed-top {
width: 441px !important;
}
.navbar-header {
width: 375px !important;
}
div.animation-body {
margin-left: -45px !important;
margin-top: 221px !important;
width: 430px !important;
height: 50px !important;
border-bottom: 175px solid rgb(250, 72, 72);
border-top: 175px solid white;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.product .description {
margin-left: 15px !important;
}
#sag-ust-sepet {
left: 320px !important;
margin-top: -40px !important;
font-size: 20px !important;
}
.design-carts-buckets {
font-size: 50px !important;
}
#design-card-1 {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
zoom: 38%;
margin-top: 110px !important;
margin-left: -190px !important;
width: 502px !important;
}
#design-card-1 .product__info {
margin-left: 550px !important;
width: 500px !important;
}
#design-card-1 .photo-container {
margin-left: 30px !important;
width: 500px !important;
height: 550px !important;
}
#design-card-1 .photo-container img {
margin-left: 18% !important;
top: 20px !important;
}
/********************************/
#design-card-2 {
border-left: 0px !important;
border-right: 700px solid;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
zoom: 38%;
margin-top: 50px !important;
margin-left: -190px !important;
width: 502px !important;
}
#design-card-2 .product__info {
margin-left: 550px !important;
width: 500px !important;
}
#design-card-2 .photo-container {
margin-left: 30px !important;
width: 500px !important;
height: 550px !important;
}
#design-card-2 .photo-container img {
margin-left: 18% !important;
top: 20px !important;
}
/************************************/
#design-card-3 {
border-left: 0px !important;
border-right: 700px solid;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
zoom: 38%;
margin-top: 50px !important;
margin-left: -190px !important;
width: 502px !important;
}
#design-card-3 .product__info {
margin-left: 550px !important;
width: 500px !important;
}
#design-card-3 .photo-container {
margin-left: 30px !important;
width: 500px !important;
height: 550px !important;
}
#design-card-3 .photo-container img {
margin-left: 18% !important;
top: 20px !important;
}
/**********************************************/
#design-card-4 {
border-left: 0px !important;
border-right: 700px solid;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
zoom: 38%;
margin-top: 50px !important;
margin-left: -190px !important;
width: 502px !important;
}
#design-card-4 .product__info {
margin-left: 550px !important;
width: 500px !important;
}
#design-card-4 .photo-container {
margin-left: 30px !important;
width: 500px !important;
height: 550px !important;
}
#design-card-4 .photo-container img {
margin-left: 18% !important;
top: 20px !important;
}
/******************************************/
/*** DESIGN CARTS YUKARIDA */
.seperator-wrapper .seperator {
display: none;
}
.seperator-wrapper {
margin-top: -11px;
margin-left: -45px;
}
body {
background: black !important;
overflow: hidden;
}
#ust-menu-rdesign {
display: none;
}
#sol-menu {
height: 390px !important;
position: static !important;
margin-top: 56px !important;
overflow: hidden !important;
margin-left: -3px !important;
}
.fa-apple {
margin-left: 2px !important;
}
.fa-home {
margin-left: 1px !important;
}
.glyphicon-chevron-down {
margin-top: -550px !important;
margin-left: -7px !important;
z-index: 5;
height: 50px !important;
}
.glyphicon-chevron-up {
top: 1520px !important;
left: 47% !important;
z-index: 5;
}
.alert {
display: none !important;
}
.w3-container {
margin-top: -625px !important;
padding-top: 0px !important;
}
.footer_bottom .row {
margin-left: 3px !important;
height: 80px !important;
}
.footer_bottom {
padding: 0px !important;
}
.footer_bg {
overflow: hidden !important;
}
div.footer_bottom div.col-lg-6 p {
font-size: 12px !important;
margin-left: -55px !important;
margin-top: 26px !important;
background: white !important;
height: 55px !important;
line-height: 50px !important;
width: 502px !important;
text-align: center !important;
color: black !important;
font-weight: bold !important;
}
}
/* IPHONE 8 */
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
.glyphicon-chevron-down {
margin-top: -390px !important;
}
}
/* IPHONE 8 PLUS */
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
.navbar-inverse .navbar-nav li a {
float: left !important;
}
}````
<br>
【问题讨论】：
-
你到底尝试了什么？提供代码也有帮助
标签： html css ios responsive