/* 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 移动应用程序有关，但我可能是错的，只是在我的代码中遗漏了某种错误。任何帮助都是感激的，因为我已经对此进行了几天的研究，但没有找到好的解决办法。
谢谢!
最佳答案
所以我实际上发现我正在处理浏览器捕获功能。而不是我的@media 查询的问题。奇怪的是 Firefox 会立即加载新的网页内容。而 chrome 和 safari，我每次都必须手动清除缓存和 cookie，才能看到我在网络服务器上所做的更改。
编辑 - Jason bamber 发布的修复
通过将查询字符串附加到 css <link rel="stylesheet" href="help.css?v=10" type="text/css"/>，您可以在进行更改时轻松破坏浏览器缓存。更改时更改数字 –
关于html - @media 查询在 Chrome 或 Safari iOS 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52266149/