@media 查询在 Chrome 或 Safari iOS 中不起作用

Question

/* page positions */
*{
 box-sizing: border-box;
}

#mainBody{
 position: fixed;
 top: 46px;
 left: 0px;
}

.center{
 position: fixed;
 left: 0;
 top: 75%;
 width: 100%;
 text-align: center;
}

#about{
 position: fixed;
 top: 50px;
 bottom: 10px;
 left: 10px;
 right: 10px;
 overflow: scroll;
}

/* fonts */
@font-face{
 font-family: Wellone;
 src: url("fonts/Fonts/Wellone/Wellone.otf") format("opentype");
}

@font-face{
 font-family: Brush;
 src: url("fonts/Fonts/ufonts.com_brush-script-mt.ttf") format("truetype");
}

@font-face{
 font-family: Barkless;
 src: url("fonts/Fonts/Barkless/Barkless.otf") format("opentype");
}

@font-face{
 font-family: Anter;
 src: url("fonts/Fonts/Anter/Anter.otf") format("opentype");
}

@font-face{
 font-family: Naive;
 src: url("fonts/Fonts/Naive/Naive.otf") format("opentype");
}



/* lists */
.navlist{
 position: fixed;
 white-space: nowrap;
 float: none;
 top: 0px;
 left: 0px;
 right: 0px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
}

.navlist li{
 display: inline-block;
}

.navlist li a{
 display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navlist li a:hover {
    background-color: #111;
}

.desclist{
 font-family:"Times New Roman";
 font-size: 200%;
 color: black;
}

.desclist li{
 list-style-type: circle;
}



/* background pictures, slideshows */
.headerimg{
 position: fixed;
 top: 46px;
 left: 0px;
 opacity: .5;
 width: 100vw;
 height: 100vh;
}

.headerimg2
{
 position: fixed;
 top: 46px;
 left: 0px;
 right: 0px;
 width: 100vw;
 height: 100vh;
}

.slideshow{
 position: fixed;
 top: 387px;
 left: 750px;
 transform: translate(-50%, -50%);
}

.mySlides{
 display: none;
 animation: fade 6s;
 /*top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);*/
}

/* Fading animation */
@keyframes fade {
  0% {opacity: 0;} 
  16.66%{opacity: 1;}
  33.32% {opacity: 1;}
  49.98% {opacity: 1;}
  100% {opacity: 0;}
}



/* word content */
/* Anter, Naive */
p.title{
 position: fixed;
 font-family: "Bodoni MT";
 top: -30px;
 font-size: 400%;
 color: white;
}

p.title2{
 position: fixed;
 font-family: Brush;
 font-size: 400%;
 top: 15px;
 color: white;
}

p.desc{
 font-family: Barkless;
 font-size: 200%;
 color: blanchedalmond;
}

p.words{
 position: relative;
 font-family: "Times New Roman";
 text-indent: 2.0em;
 font-size: 200%;
 color: black;
 font-weight: bold;
 clear: left;
}


@media only screen and (min-width: 376px){
 #mainBody{
  display: none;
 }
}

<!DOCTYPE HTML>
<html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="wedding, wedding meadows, country wedding, rustic wedding, wedding venue, outdoor wedding, beautiful wedding, spokane wedding, cheney wedding, rustic meadows">
  <meta name="DC.title" content="Rustic Meadows">
  <meta name="description" content="Plan your perfect wedding at our beautiful country home, with gorgeous views, ample space, a rustic old-timey feel, and a caring family-run staff.">
  <meta name="robots" content="index,follow">
  <title>Rustic Meadows</title>
  <link rel="stylesheet" href="help.css" type="text/css"/>
 </head>
 <body>
  <div id="mainBody">
   <nav>
     <ul class="navlist">
       <li><a class="active" href="index.html">Home</a></li>
    <li><a href="package.html">Wedding Packages</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    <li><a href="pictures.html">Gallery</a><li>
    <li><a href="contact.html">Contact Us</a></li>
     </ul>
   </nav>
   <img class="headerimg2" alt="rustic meadows website background" src="Pictures\RusticMeadowsWeddingBackground.png"/>
   <p class="title">Rustic</p>
   <p class="title2">Meadows</p>
   <div class="slideshow">
    <img class="mySlides fade" alt="rustic meadows wedding bride and groom" src="Pictures\RusticMeadowsBrideGroom.jpg"/>
    <img class="mySlides fade" alt="rustic meadows ceremony area" src="Pictures\RusticMeadowsCeremony.jpg"/>
    <img class="mySlides fade" alt="rustic meadows reception area" src="Pictures\RusticMeadowsReception.jpg"/>
    <img class="mySlides fade" alt="rustic meadows wedding first kiss" src="Pictures\RusticMeadowsKiss.jpg"/>
    <img class="mySlides fade" alt="rustic meadows bride and groom chairs" src="Pictures\RusticMeadowsMrMrs.jpg"/>
    <img class="mySlides fade" alt="rustic meadows night lights" src="Pictures\RusticMeadowsLights.jpg"/>
    <img class="mySlides fade" alt="rustic meadows welcome sign" src="Pictures\RusticMeadowsSign.jpg"/>
    <img class="mySlides fade" alt="rustic meadows table setup" src="Pictures\RusticMeadowsTable.jpg"/>
    <img class="mySlides fade" alt="rustic meadows walkway to ceremony" src="Pictures\RusticMeadowsWalkway.jpg"/>
    <img class="mySlides fade" alt="rustic meadows wagon wheel decoration" src="Pictures\RusticMeadowsWheel.jpg"/>
   </div>
   <script>
   var slideIndex = 0;
   showSlides();

   function showSlides() {
       var i;
       var slides = document.getElementsByClassName("mySlides");

       for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";  
       }
       slideIndex++;
       if (slideIndex> slides.length) {slideIndex = 1}    
       slides[slideIndex-1].style.display = "block";  
       setTimeout(showSlides, 6000);
   }
   </script>
  </div>
 </body>  
</html>

因此，我已经在该站点的许多帖子中读到了内容。我的 HTML 文件中有适当的标记，并且我的 @media 查询位于我的 CSS 文件的末尾。问题是，媒体查询适用于移动 firefox 应用程序 (iPhone 6)，适用于我测试过的桌面浏览器，但不适用于移动 safari 和移动 chrome 应用程序。我觉得这个问题与 safari 和 chrome 移动应用程序有关，但我可能是错的，只是在我的代码中遗漏了某种错误。任何帮助都是感激的，因为我已经对此进行了几天的研究，但没有找到好的解决办法。

谢谢！

Answer 1

添加到 <link rel="stylesheet" href="help.css" type="text/css"/> 您的媒体属性。
就像：

<link rel="stylesheet" media="screen and (min-width: 376px)" href="help.css" type="text/css" />

Answer 2

所以我实际上发现我正在处理浏览器捕获功能。而不是我的@media 查询的问题。奇怪的是 Firefox 会立即加载新的网页内容。 chrome 和 safari，我每次都必须手动清除缓存和 cookie，才能看到我在网络服务器上所做的更改。

编辑 - Jason bamber 发布的修复程序

您可以在进行更改时轻松破坏浏览器缓存，方法是在 css <link rel="stylesheet" href="help.css?v=10" type="text/css"/> 更改数字时附加查询字符串 –

@media 查询在 Chrome 或 Safari iOS 中不起作用

@media queries not working in Chrome or Safari iOS

html

css

media-queries

mobile-safari

mobile-chrome