小贝子编程

媒体查询不工作，即使添加viewport元标签



当我插入媒体查询时，它们在Firefox检查器中工作，但在实际的移动设备中不起作用。当我从移动端打开它时，媒体查询被完全忽略。

我已经阅读了前面的许多问题，但是即使我正确地放置了视口，它们仍然不起作用。

下面是我的代码: 

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.media-mobile-vertical,
.mobile-container {
display: none;
}
div {
display: grid;
}
body {
background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
color: #fff;
font-family: Montserrat, sans-serif;
}
.header {
height: 10vh;
grid-template-columns: 20% 45% 30%;
}
.header-left {
justify-items: center;
align-items: center;
}
.header-logo {
max-width: 250px;
}
.header-right {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
gap: 25px;
}
.header-right-dropdown-outer {
min-width: 100px;
width: 100%;
position: relative;
}
.header-right-dropdown {
width: 100%;
min-width: 100px;
background-color: #181924;
border-radius: 0.5rem;
box-shadow: 3px 3px 0 0 rgb(22 23 33 / 35%);
padding: 1rem;
top: 100%;
white-space: nowrap;
display: none;
position: absolute;
right: 0;
z-index: 9;
}
.header-right-dropdown-outer:hover .header-right-dropdown {
display: block;
}
.nobull {
list-style-type: none;
}
.mid-area {
height: 80vh;
grid-template-columns: 1fr 3fr 1fr;
}
.left-sidebar {
width: 20vw;
justify-items: center;
margin-top: 10%;
}
.right-sidebar {
width: 20vw;
justify-items: center;
align-items: center;
}
.mainframe {
width: 60vw;
justify-items: center;
align-items: center;
}
.btn {
transition: all 0.3s ease-in;
box-shadow: unset;
width: 100%;
}
.btn-grey {
border: 1px solid #1e92e6;
border-radius: 0.25rem;
color: #fff;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1em;
background: 0 0;
padding: 0.75rem 1rem;
text-decoration: none;
transition: all 0.15s;
}
.btn-blank {
background: 0 0;
border: 1px solid rgba(96, 125, 139, 0.25);
color: #fff;
}
.btn-drop-right {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}
.btn-blank-sidebar {
background: 0 0;
border: none;
}
.btn:hover {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}
.footer {
height: 10vh;
grid-template-columns: 1fr 1fr 1fr;
font-size: 11px;
}
.footer-center {
align-self: center;
justify-items: center;
}
.footer-right {
grid-template-columns: 16% 16% 16% 16% 16% 16%;
align-items: center;
}
.footer-left {
width: 20vw;
justify-items: center;
align-items: center;
}
.widget-container {
width: 50vw;
height: 60vh;
background: rgba(22, 23, 33, 0.75);
border: 1px solid rgba(96, 125, 139, 0.25);
border-radius: 1rem;
box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
padding: 1rem 1rem;
justify-self: center;
align-self: center;
}
/* MEDIA QUERY MOBILE VERTICAL POSITION */
@media only screen and (max-width: 811px) {
.grid-container,
.mobile-container {
display: none;
margin: 0;
padding: 0;
border: 0;
}
.media-mobile-vertical {
display: grid;
height: 100vh;
justify-items: center;
align-items: end;
background-color: red;
}
.flip-container {
grid-template-rows: 1fr 1fr;
justify-items: center;
align-items: end;
gap: 9%;
}
.media-mob-flip {
max-width: 25%;
align-self: end;
}
.mobile-mob-title {
align-self: start;
}
.media-mob-logo {
max-width: 50%;
align-self: start;
}
}
/* MEDIA QUERY MOBILE HORIZONTAL POSITION */
@media only screen and (min-width: 812px) and (max-width: 1025px) {
.grid-container,
.media-mobile-vertical {
display: none;
display: none;
margin: 0;
padding: 0;
border: 0;
}
body {
background: #181923;
}
.mobile-container {
display: grid;
max-height: 99vh;
margin: 1%;
}
.mob-header-left {
justify-items: center;
}
.mob-logo {
max-width: 25%;
}
.mobile-footer {
font-size: 10px;
display: grid;
align-self: end;
align-items: end;
justify-items: center;
margin-top: 3%;
}
.btn,
btn-blank-sidebar,
btn-grey {
height: 2px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
<!-- <meta name="viewport" content="width=device-width,initial-scale=1" /> -->
<!-- <script src="/../../JS/countdown.js"></script> -->
<link rel="stylesheet" href="dashboard.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="global0.ico" />
<title>Dashboard Frame Draft</title>
</head>
<body>
<!-- VERTICAL POSITION PHONE STARTS 1 CONTAINER / 2 ROWS-->
<div class="media-mobile-vertical">
<div class="flip-container">
<img class="media-mob-flip" src="fl.png" alt="">
<p class="mobile-mob-title">Please flip the device horizontally!</p>
</div>
<img class="media-mob-logo" src="global1.png" alt="">
</div>
<!-- VERTICAL POSITION PHONE ENDS -->
<!-- MOBILE VERSION STARTS 1 CONATINER / 3 ROWS-->
<div class="mobile-container">
<!-- MOBILE HEADER STARTS 1 CONTAINER / 2 ROWS-->
<div class="mobile-header">
<div class="mob-header-left">
<img class="mob-logo" src="global1.png" alt="">
</div>
<div class="mob-header-right"></div>
</div>
<!-- MOBILE HEADER ENDS -->
<!-- MOOBILE BODY STARTS 1 CONTAINER / 1 BOX-->
<div class="mobile-midarea">
<div class="mob-left-sidebar">
<ul class="mob-nobull">
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Pre-Sale</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Claim</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Play</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Stake</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Farm</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Wrap</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Bridge</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Calculator</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Walkthrough Videos</span></a></li>
</ul>
</div>
</div>
<!-- MOBILE BODY ENDS -->
<!-- MOBILE FOOTER STARTS 1 CONTAINER / 1 BOX-->
<div class="mobile-footer">
<div class="mob-footer-center">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
</div>
<!-- MOBILE FOOTER ENDS -->
</div>
<!-- MOBILE VERSION ENDS -->
<div class="grid-container">
<div class="header">
<div class="header-left">
<a href="index.html"class="link"><img class="header-logo" src="global1.png" alt="" /></a>
</div>
<div class="header-center"></div>
<div class="header-right">
<div class="header-right-dropdown-outer">
<button class="btn btn-grey"><span>Tools</span></button>
<div class="header-right-dropdown">
<ul class="nobull">
<li><a href="#" class="btn btn-grey btn-blank"><span>Buy on PancakeSwap</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Add token to wallet</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Borrow</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Wrap</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Bridge</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Customize</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Developer API</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Walkthrough Videos</span></a></li>
</ul>
</div>
</div>
<div class="header-right-dropdown-outer">
<button class="btn btn-drop-right btn-grey"><span>Connect Wallet</span></button>
<div class="header-right-dropdown">
<ul class="nobull">
<li><a href="#" class="btn btn-grey btn-blank"><span>Metamask</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Wallet Connect</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Binance Wallet</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank"><span>Trust Wallet</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mid-area">
<div class="left-sidebar">
<ul class="nobull">
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Pre-Sale</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Claim</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Play</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Stake</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Farm</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Wrap</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Bridge</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Calculator</span></a></li>
<li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Walkthrough Videos</span></a></li>
</ul>
</div>
<div class="mainframe">
<div class="widget-container">
<!-- WIDGET SUBCONTAINER GOES HER -->
</div>
</div>
<div class="right-sidebar"></div>
</div>
<div class="footer">
<div class="footer-left"></div>
<div class="footer-center">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
<div class="footer-right">
<div class="footer-right-menu">Litepaper</div>
<div class="footer-right-menu">Manifest</div>
<div class="footer-right-menu">Press</div>
<div class="footer-right-menu">Team</div>
<div class="footer-right-menu">Carrer</div>
<div class="footer-right-menu">Contact Us</div>
</div>
</div>
</div>
</body>
</html>

如何解决这个问题?

添加meta标签并从meta

中删除其他部分

/*replace your css media query with line */ 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

/* here you write ccs*/

}

只需要在header的link标签中添加media=:

<link media="screen and (max-device-width: 811px)" rel="stylesheet" href="dashboard.css" />

编辑

由于"viewport"Meta标签不是问题，然后尝试在你的css

@media only screen and (max-width: 480px) {
.media-mobile-vertical {
display: grid;
height: 100vh;
justify-items: center;
align-items: end;
background-color: red;
}
}

在<head>标签开始后使用此代码

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}

请尝试使用此媒体查询。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium