Запросы @media не работают в Chrome или Safari iOS - PullRequest
Новая
       26

Запросы @media не работают в Chrome или Safari iOS

0 голосов
/ 11 сентября 2018 

/* 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, но я могу ошибаться и просто пропустить какую-то ошибку в своем коде. Любая помощь благодарна, так как я исследовал это в течение нескольких дней и не нашел хороших исправлений.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Итак, я обнаружил, что я имею дело с функцией отлова браузеров.Вместо проблем с моими запросами @media.Странно то, что Firefox немедленно загружает новый веб-контент.В то время как Chrome и Safari, мне приходится каждый раз вручную очищать кеш и куки, чтобы увидеть изменения, которые я сделал на веб-сервере.

Редактировать - исправление, опубликованное Джейсоном Бамбером

При внесении изменений вы можете легко разрушить кэш браузера, добавив строку запроса к css <link rel="stylesheet" href="help.css?v=10" type="text/css"/>, изменив номер при внесении изменений.изменить -

0 голосов
/ 11 сентября 2018

Добавьте к <link rel="stylesheet" href="help.css" type="text/css"/> вашу медиа-собственность.
Это как: 

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