个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:07:56 24 4
gpt4 key购买 nike 

/* 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/

24 4 0
文章推荐： javascript - HTML 页面中的 XML/XSL 转换表
文章推荐： c++ - 如何防止窗口被停用？
文章推荐： javascript - 制作索引文件，如果 session 不存在，则通过 AJAX 加载登录屏幕
文章推荐： c++ - 为什么图像出现在我的 QGraphicsView 派生类中的错误位置？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com