html - 媒体断点在本地和实时工作(对所有媒体断点使用检查工具)，但在移动设备上不起作用

标签 html css media-queries

所以一切都在本地工作，甚至在本地运行(但只在我的电脑上)，但是当我在手机上访问该网站时，它似乎忽略了我的 media.css

我以为是断点问题。所以我从我的电脑登录网站并检查页面并将其设置为与我的手机横向模式相同的分辨率(823x412)并且一切正常。

但是当我在我的手机上登录同一个网站时，它就不起作用了。我不知道是什么原因造成的。

this is the site 

/*from main .css */
* {
  margin: 0;
  padding: 0;
}
/*---------BODY & BACKGROUND-----------*/
body {
  background-image: url("/Images/Iphonexbackground.jpg");
  background-size: cover;
  font-family: "Merienda";
  color: rgb(200, 150, 15);
  font-size: 0.8em;
  max-width: 100%;
  max-height: 100vh;
}
footer {
  height: 5vh;
  background-color: rgb(33, 33, 33);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
/*---------HEADING & MAIN SCREEN STUFF-----------*/
#home {
  background-color: rgba(33, 33, 33, 0.9);
  max-width: 100%;
  height: calc(100vh - 20vh);
  padding-top: 15vh;
  display: flex;
  flex-flow: column;
  text-align: center;
}
.largeHeading {
  padding-bottom: 2vh;
}
.smallHeading {
  padding-bottom: 50vh;
}
.moe {
  color: white;
}
.social a {
  color: rgb(200, 150, 15);
}
.social a:hover {
  color: white;
  transition: all 0.5s ease-out;
}
/*------------------ROTATING MENU BUTTON----------------------*/
.menuButton {
  position: absolute;
  z-index: 3;
  right: 35px;
  top: 35px;
  cursor: pointer;
  transition: all 0.5s ease-out;
}
.buttonLine {
  width: 25px;
  height: 2px;
  background-color: white;
  margin: 0 0 5px 0;
  transition: all 0.5s ease-out;
}
.close > .buttonLine:nth-child(1) {
  transform: rotate(405deg) translate(5px, 5px);
}
.close > .buttonLine:nth-child(2) {
  opacity: 0;
}
.close > .buttonLine:nth-child(3) {
  transform: rotate(-405deg) translate(5px, -5px);
}
/*------------------------------FULL MENU----------------------------*/
.menu {
  max-width: 100vh;
}
/*Menu is closed by default*/
.menuWrapper {
  position: fixed;
  top: 0;
}
.show > .menuWrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}
/*----------------------PORTRAIT MENU-----------------------*/
/*handles image*/
.myPortrait {
  transform: translate3d(-100%, 0, 0);
}
.show > .portrait {
  width: 150px;
  height: 150px;
  background-image: url("/Images/Portrait.jpg");
  background-size: cover;
  border: 3px solid rgb(200, 150, 15);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
.show > .myPortrait {
  visibility: visible;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: none;
  width: 100%;
  height: 35vh;
  overflow: hidden;
  background-color: rgb(33, 33, 33);
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
/*----------------------LINK MENU-----------------------*/
.navLink {
  color: rgb(200, 150, 15);
  text-decoration: none;
}
.current > a {
  color: white;
  font-size: 1.5em;
}
.navItem a:hover {
  color: white;
  font-size: 1.5em;
}
.menuItems {
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
}
.navItem {
  transform: translate3d(600px, 0, 0);
}
/*handles menue items*/
.show > .menuItems {
  visibility: visible;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  float: none;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  background-color: rgb(33, 33, 33);
  list-style: none;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
}
/*Delays each individual link movments
coming from the right side*/
.show > .navItem:nth-child(1) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.1s;
  color: brown;
}
.show > .navItem:nth-child(2) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.2s;
  color: brown;
}
.show > .navItem:nth-child(3) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.3s;
  color: brown;
}
.show > .navItem:nth-child(4) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.4s;
  color: brown;
}
.show > .navItem:nth-child(5) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.5s;
  color: brown;
}
.show > .navItem:nth-child(6) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.6s;
  color: brown;
}
.show > .navItem:nth-child(7) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.7s;
  color: brown;
}
.show > .navItem:nth-child(8) {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease-out;
  transition-delay: 0.8s;
  color: brown;
}
/*from contact.css*/
.contactContainer {
  background: rgb(66, 66, 66);
  max-width: 100%;
  height: 85vh;
  min-height: 475px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10vh;
  color: black;
  overflow: scroll;
}
.company-info {
  background: rgb(200, 150, 15);
  border: 1px solid rgb(200, 150, 15);
  font-size: 1em;
  width: 100%;
  height: 20%;
  line-height: 1.5em;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.company-info > h3,
.company-info > ul {
  list-style: none;
  text-align: center;
}
.contactForm {
  background: rgb(243, 227, 183);
  border: 1px solid rgb(200, 150, 15);
  width: 96%;
  height: 75%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  padding-left: 2%;
  padding-right: 2%;
  font-size: 0.8em;
}
.letsChat {
  grid-column: 1/3;
  font-size: 1.5em;
  color: rgb(200, 150, 15);
  text-align: center;
  align-self: center;
}
.contactForm input {
  border: 1px solid rgb(200, 150, 15);
  width: 100%;
  height: 40px;
}
.contactForm textarea {
  border: 1px solid rgb(200, 150, 15);
  width: 100%;
  height: 100px;
}
.contactForm button {
  background-color: rgb(200, 150, 15);
  border: 1px solid rgb(200, 150, 15);
  width: 100%;
  height: 2rem;
  font-weight: bold;
}
.contactForm button:hover {
  opacity: 0.5;
}
.full {
  grid-column: 1/3;
}
.req {
  color: red;
}

/*from media.css*/
@media only screen and (min-height: 350px) and (max-height: 500px) and (min-width: 800px) and (max-width: 825px) {
  body {
    background-image: url("/Images/Background.jpg");
  }
  .smallHeading {
    padding-bottom: 45vh;
  }
  #about {
    grid-gap: 0vh;
  }
  .aboutWrapper {
    height: 45vh;
  }
  .social {
    height: 6vh;
  }
  .contactContainer {
    height: 75vh;
    min-height: 75vh;
    padding-top: 20vh;
    display: grid;
    grid-template-columns: 2fr 3fr;
    font-size: 1.2em;
  }
  .company-info {
    height: 90%;
  }
  .contactForm {
    height: 90%;
  }
  .contactForm input {
    height: 25px;
  }
  .contactForm textarea {
    height: 65px;
  }
  .contactForm button {
    height: 1.5rem;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />
  <link rel="stylesheet" href="/CSS/main.css" />
  <link rel="stylesheet" href="/CSS/contact.css" />
  <link rel="stylesheet" href="/CSS/media.css" />
  <title>Contact-Mohamed Negm</title>
</head>

<body>
  <header>
    <div class="menuButton">
      <div class="buttonLine"></div>
      <div class="buttonLine"></div>
      <div class="buttonLine"></div>
    </div>
    <nav class="menu">
      <div class="menuWrapper">
        <div class="myPortrait">
          <div class="portrait"></div>
        </div>
        <ul class="menuItems">
          <li class="navItem"><a href="/" class="navLink">HOME </a></li>
          <li class="navItem">
            <a href="about.html" class="navLink">ABOUT ME </a>
          </li>
          <li class="navItem current">
            <a href="contact.html" class="navLink">CONTACT </a>
          </li>
          <li class="navItem">
            <a href="animationPortfolio.html" class="navLink">ANIMATION PORTFOLIO
              </a>
          </li>
          <li class="navItem">
            <a href="developerPortfolio.html" class="navLink">DEVELOPER PORTFOLIO
              </a>
          </li>
          <li class="navItem">
            <a href="educatorPortfolio.html" class="navLink">EDUCATOR PORTFOLIO
              </a>
          </li>
          <li class="navItem">
            <a href="photographyPortfolio.html" class="navLink">PHOTOGRAPHY PORTFOLIO
              </a>
          </li>
          <li class="navItem">
            <a href="videographyPortfolio.html" class="navLink">VIDEOGRAPHY PORTFOLIO
              </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <main class="contactContainer">
    <div class="company-info">
      <h3>Mohamed A. Negm</h3>
      <ul>
        <li><i class="fa fa-road"></i> Brooklyn NY</li>
        <li><i class="fa fa-phone"></i> (917) 930-0000</li>
        <li><i class="fa fa-envelope"></i> mr.negm90@gmail.com</li>
      </ul>
    </div>
    <form class="contactForm" action="https://formspree.io/mr.negm90@gmail.com" method="POST">
      <h3 class="letsChat">Let's Chat</h3>
      <p>
        <label>Name<span class="req">*</span></label>
        <input type="text" name="name" required />
      </p>
      <p><label>Company</label> <input type="text" name="company" /></p>
      <p>
        <label>Email Address<span class="req">*</span></label>
        <input type="email" name="_replyto" required />
      </p>
      <p><label>Phone Number</label> <input type="text" name="phone" /></p>
      <p class="full">
        <label>Message<span class="req">*</span></label>
        <textarea name="message" rows="5" required></textarea>
      </p>
      <p class="full"><button>Submit</button></p>
    </form>
  </main>
  <footer>Copyright &copy; 2019</footer>
  <script src="/main.js"></script>
</body>

</html>

最佳答案

我终于找到问题了。

之前我是这样做的:

@media only screen and (min-height: 350px) and (max-height: 500px) and (min-width: 800px) and (max-width: 825px) {..}

这让浏览器感到困惑，因为它有四个参数或异常 min-width AND max-width AND min-height AND max-height

对我有用的是当我把它从 4 改为 3 时，像这样:

@media only screen and (min-width: 800px) and (max-width: 825px) and (max-height: 500px) {...}

这减少了浏览器上的计算，也减少了要处理的异常。

我很高兴地说，问题已解决，案件已结案。即使有人否决了这个问题，我也希望有一天这个答案能对某人有所帮助，因为我真的为此苦苦挣扎了一段时间。

关于html - 媒体断点在本地和实时工作(对所有媒体断点使用检查工具)，但在移动设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54066394/

上一篇：html - 在多行文本下绝对定位一行

下一篇：javascript - 有人可以帮我找到带有链接的 ng-contents 的定位器吗？

相关文章：

javascript - 使用 javascript 代码不是用于 id，而是用于类

html - 如何关闭或删除 svg 中包含的圆圈？

javascript - 如何删除 "printing"html 的 href 到 PDF？

CSS速记可能吗？

html - 导航栏的媒体查询在移动设备上不起作用

javascript - 将 var 指定为选择器

css - 移动导航栏在 Foundation 中不起作用

css - 绝对定位的 div 看起来不同......在同一浏览器的不同实例中

jquery - @media Query 是否覆盖了我的 jQuery 的规则？

javascript - 仅在桌面模式下激活 jquery 功能？

©2024 IT工具网  联系我们