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

【问题标题】：@media queries not working in Chrome or Safari iOS@media 查询在 Chrome 或 Safari iOS 中不起作用
【发布时间】：2018-09-10 22:08:25
【问题描述】：

/* 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 文件中有适当的标签，并且我的 CSS 文件末尾有我的 @media 查询。问题是，媒体查询适用于移动 Firefox 应用程序（iPhone 6），它适用于我测试过的桌面浏览器，但不适用于移动 safari 和移动 chrome 应用程序。我觉得这个问题与 safari 和 chrome 移动应用程序有关，但我可能是错的，只是在我的代码中遗漏了某种事故。任何帮助都是不胜感激的，因为我已经研究了几天，但没有找到好的解决办法。

谢谢！

【问题讨论】：

请解释什么不起作用。您的媒体查询目标屏幕宽度超过 375 像素，这排除了当前大多数处于纵向模式的手机，您确定这不是您的问题吗？
所以，现在我在纵向模式下进行所有这些测试。是的，你是对的。我将我的 css 更改为我使用“最大宽度：375px”的位置。我也在做基本测试，因为这个问题让我发疯。我发现的是在 safari 和 chrome 中，我每次都必须清除缓存和 cookie，浏览器才能接受对网站所做的更改。如果我只是将更改应用到我的网站并“重新加载”网页，Safari 和 chrome 将不会反映更改。 firefox 会立即生效。
所以我从我的发现猜测，也许我的内容在发布到我的网站后在不同浏览器之间有很长的“同步”时间？
您可以在进行更改时轻松破坏浏览器缓存，方法是将查询字符串附加到 css <link rel="stylesheet" href="help.css?v=10" type="text/css"/> 在进行更改时更改数字
如果你使用任何构建工具（gulp、webpack 等），这种类型的东西可以被构建到构建过程中。或者，如果你使用服务器端语言来构建你的 html，你可以使用 css 文件最后修改时间来做同样的事情

标签： html css media-queries mobile-safari mobile-chrome

【解决方案1】：

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

编辑 - Jason bamber 发布的修复

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

添加此内容是否意味着 CSS 页面中的所有内容都符合“最小宽度”规则，还是我仍将 @media 属性与您的解决方案一起添加到我的 CSS 文件中？跨度>