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

[Anonymous]

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

Я пробовал просмотреть страницу на двух устройствах Samsung Galaxy, и каждый раз это не удавалось.
Есть ли у кого-нибудь какие-либо предложения?
Спасибо. заранее.
См. выше....
вот мои медиа-запросы:
@media only screen и (минимальная ширина: 400 пикселей)
{

Код: Выделить всё

.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 и (минимальная ширина: 900 пикселей){

Код: Выделить всё

.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