Я добавил медиа-запросы в свой CSS и протестировал свою страницу на Edge, Chrome и использовал онлайн-эмулятор мобильных ⇐ CSS

[Anonymous]

Как и выше, я добавил медиа-запросы в свой CSS, протестировал свою страницу на Edge, Chrome и использовал онлайн-эмулятор мобильных устройств, и все работает нормально.
Однако, когда я на самом деле просматриваю На странице на мобильном устройстве все гибкое направление соответствует ориентации, которую я установил для больших экранов, что портит весь макет.
https://toccerz.github.io/Elementree -Веб-сайт/
Это страница, которую я создал для компании друзей, столкнувшейся с этой проблемой. У меня в голове установлена ​​мета-область просмотра, так что проблема не в этом.


Я пробовал просмотреть страницу на двух устройствах Samsung Galaxy, и каждый раз это не удавалось.
Есть ли у кого-нибудь какие-либо предложения?
Заранее спасибо.
Вот мои медиа-запросы:
@media only screen and (min-width: 400px)
{
.nav__link {
padding: 0 16px;
width: 100%;
height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 10;
}

.home_container {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
margin: 0 auto;
font-size: 24px;
padding-top: 80px;
}

.header_img {
width: 400px;
border-radius: 32px;
}

.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
max-width: 400px;
margin: 0 auto;
}

.about-us_img {
width: 400px;
border-radius: 32px;
}

a {
font-size: 10px;
}
}

@media only screen and (min-width: 900px) {
.nav__link {
color: #ffffff;
font-weight: bold;
background: #15bb5a;
padding: 0 16px;
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 10;
}

.home_container {
width: 100%;
max-width: 1000px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 24px;
padding-top: 80px;
}

.header_img {
width: 700px;
border-radius: 32px;
}

.container {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
width: 100%;
max-width: 1300px;
margin: 0 auto;
}

.about-us_img {
width: 700px;
border-radius: 32px;
}

a {
font-size: 24px;
}
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... e-and-used