Моя страница не работает на 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.
Я пробовал на Samsung 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>