Как заставить вашу точку останова css работать на мобильном телефоне? (метатег viewport уже используется) - PullRequest
Новая
       28

Как заставить вашу точку останова css работать на мобильном телефоне? (метатег viewport уже используется)

0 голосов
/ 21 апреля 2019

Я пытаюсь заставить мой медиа-запрос 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;}
}

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

1 Ответ

0 голосов
/ 21 апреля 2019

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

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

...