Блог

Я пытаюсь заставить свой медиа-запрос размером 360px работать на мобильных устройствах, но он этого не хочет. Кажется, что он работает на рабочем столе с помощью инструментов разработчика, чтобы изменить его на мобильный вид, но на самом деле он не работает на телефоне.

Я уже пробовал мета-тег viewport, я также пытался изменить масштабирование и масштабируемость пользователя в мета-теге, я попытался изменить размер px, чтобы посмотреть, будет ли он работать при большем размере, и он не работает.

 <!--HTML Meta Tag-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=3.5, user-scalable=yes" />

<!--Nav File Import Using php-->
<div id="wrapper">
<div class="navdiv">
<?php include("inc/Nav.php"); ?>
</div>

<div class="altdiv">
<?php include("inc/Altnav.php"); ?>
</div>
  

 <!--Nav I Want To Show-->
<nav>
<div>
<ul class="navbar">

<!--Home-->
<li class="navitem"><a href="index.php" class="n">
//svg here
<label class="navbutton">Home</label></a></li>

<!--Events-->
<li class="navitem"><a href="events.php" class="n">
//svg here
<label class="navbutton">Events</label></a></li>

<!--News-->
<li class="navitem"><a href="blog.php" class="n">
//svg here
<label class="navbutton">News</label></a></li>

<!--More-->
<li class="navitem"><span class="n"><button type="button">
//svg here
<label class="navbutton">More</label></span></li>
</ul>
</div>
</nav>
  

 <!--CSS Code-->
//Does not show this
@media screen and (max-width : 360px) and (-webkit-max-device-pixel-ratio: 4) {
    #wrapper {display:grid; grid-template-columns: auto; grid-template-rows: auto auto auto;}
    .navbar {display:grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto; list-style:none; padding-left:0;}
    .navitem {display:flex; justify-content:center;}
    .n {display:flex; flex-direction:column; justify-content:center;}
    footer {text-align:center;}
    .footlink {display:flex; padding-left:0; justify-content:center;}
    .navdiv {display:none;}
    button {background-color:rgb(189,5,29); border:0;  padding:0;}
}

//Shows this
@media screen and (max-width : 750px) and (min-width: 361px) {
    .altdiv {display:none;}
    .navbar {display:flex; flex-direction:row; list-style:none;}
    .navitem {padding:1vw;}
}
  

Я хочу, чтобы на экране мобильного устройства отображалась другая навигация, но она неправильно масштабируется, поэтому я не смог разобраться в проблеме. У кого-нибудь есть идеи?

Вы пробовали более стандартный:

 <meta name="viewport" content="width=device-width, initial-scale=1">