即使插入視口，媒體查詢也不起作用-有解無憂

當我插入媒體查詢時，它們可以在 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>

我該如何解決？

uj5u.com熱心網友回復：

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

請嘗試改用此媒體查詢。

uj5u.com熱心網友回復：

添加元標記并從元中洗掉其他部分

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

uj5u.com熱心網友回復：

在標簽開始后使用此<head>代碼

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

uj5u.com熱心網友回復：

它只需要將 media= 添加到頭部的鏈接標簽中：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483157.html

標籤：html css 媒体查询 CSS网格

上一篇：我在一行中有一個單詞串列滑塊，當我將滑鼠懸停在單詞上時，我想要影片暫時暫停

下一篇：如何在vanillahtml中創建大小回應的獨立滾動部分