Мои изображения выглядят хорошо на всех браузерах и телефонах Android, но как только я попадаю на iOS, изображения очень увеличиваются. Я не пробовал сафари на ПК.У меня есть iOS на ipad и iphone, и оба делают одно и то же.Это можно обойти?Я так много исследовал, но ни одно из других решений не сработало.
body, html {
height: 100%;
margin: 0;
font-family: Corbel, Calibri;
color: #fff;
text-align: center;
position: relative;
line-height: 22px;
}
.parallax1 {
background-image: url(https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/birth_month_flowers-primary-1920x1280px_pixabay.jpg?itok=zmvl5X7w);
height: 100%;
}
.parallax2 {
background-image: url(https://thoughtcatalog.files.wordpress.com/2018/06/flower-puns.jpg?w=1140&resize=1140,761&quality=95&strip=all&crop=1);
height: 100%;
}
.parallax3 {
background-image: url(https://static1.squarespace.com/static/523b823ce4b0c90f4f169867/t/586e571f6b8f5b5ff61bb4dc/1483626310742/);
height: 100%;
}
.parallax4 {
background-image: url(https://www.seedsavers.org/site/img/seo-images/0841-benarys-giant-zinnia-flower.jpg);
height: 100%;
}
.parallax1, .parallax2, .parallax3, .parallax4 {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 0;
}
.scs {
position: absolute;
color: #fff;
font-size: 550%;
top: 38%;
width: 100%;
text-transform: uppercase;
letter-spacing: 8px;
text-shadow: 0 0 10px #000;
}
.heading-sm {
position: absolute;
color: #fff;
font-size: 550%;
top: 38%;
width: 100%;
text-transform: uppercase;
letter-spacing: 8px;
text-shadow: 0 0 10px #000;
}
header {
width: 100%;
position: fixed;
z-index: 999;
}
nav {
background: rgba(0,0,0,.85);
padding: 1px;
margin-left: -42px;
}
nav ul li{
display: inline-block;
}
ul {
list-style: none;
text-align: center;
}
ul li a {
text-decoration: none;
font-size: 20px;
text-align: center;
padding: 15px;
font-style: "Lucida Sans", "Calibari";
font-weight: bold;
color: #fff;
}
a:hover {
color: #FF9C33;
}
ul li ul {
display:none;
}
ul ul {
position: absolute;
margin-top:16px;
}
ul li:hover ul {
display: block;
background: rgba(0,0,0,.85);
text-align: left;
}
ul li:hover ul li{
display: block;
line-height: 30px;
margin-left:-40px;
}
.fnav {
color: #000;
}
section {
overflow: auto;
padding: 5px 80px;
background-color: #160525;
}
section p, h2, a {
color: #fff;
}
.left {
text-align: left;
}
iframe {
float: left;
margin: 15px 10px 0px 0px;
}
.iframe {
float: none;
}
.lessons {
text-align: left;
padding-bottom: 15px;
}
.pay li {
display: inline-block;
padding: 2.6%;
}
.tablemain {
width: 100%;
text-align: center;
margin-top: 7px;
border-collapse: collapse;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.table {
padding-top: 15px;
width: 100%;
border-collapse: collapse;
}
.table tr,th,td {
border: solid 1px;
}
.table th {
padding: 10px;
text-align: center;
}
.table td {
padding: 5px;
}
tr:nth-child(even){background-color: #413050}
.f1 {
padding-top: 4px;
}
.contact-form {
position: absolute;
top: 20%;
width: 100%;
}
.form-control {
width: 600px;
background-color: rgba(22, 5, 37, 0.7);
opacity: 5%;
border: none;
outline: none;
border-bottom: 1px solid #fff;
color: #fff;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
color: #fff;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
}
fieldset {
border: none;
}
.circle {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%,-50%);
border: 2px solid #fff;
border-radius: 50%;
width: 100px;
height: 100px;
text-align: center;
line-height: 110px;
font-size: 80px;
overflow: hidden;
}
.circle .fa {
color: #fff;
margin: 0;
padding: 0;
animation: animate 1s linear infinite;
}
@keyframes animate
{
0%
{
transform: translateY(-50px);
text-shadow: 0 50px 0 #fff;
}
20%
{
transform: translateY(0px);
text-shadow: 0 10px 0 #fff;
}
40%
{
transform: translateY(0px);
text-shadow: 0 -10px 0 #fff;
}
60%
{
transform: translateY(0px);
text-shadow: 0 0px 0 #fff;
}
100%
{
transform: translateY(100px);
text-shadow: 0 -50px 0 #fff;
}
}
.circle:before {
content: 'SCROLL DOWN';
position: absolute;
color: #fff;
font-size: 10px;
text-align: center;
left: 16px;
bottom: 12px;
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
.scs {
position: absolute;
color: #fff;
font-size: 450%;
top: 38%;
width: 100%;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 10px #000;
}
.iframe {
width: -webkit-fill-available;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
ul li a {
padding: 10px;
}
.scs {
font-size: 250%;
}
section {
padding: 5px 5px;
}
iframe {
width: -webkit-fill-available;
}
.f1 {
padding-top: 0px;
}
.circle {
top: 88%;
}
.form-control {
width:-webkit-fill-available;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
ul li a {
padding: 5px;
font-size: 14px;
}
.scs {
font-size: 250%;
letter-spacing: 2px;
line-height: 40px;
}
section {
padding: 0px 2px;
}
iframe {
width: -webkit-fill-available;
}
.f1 {
padding-top: 0px;
}
.circle {
top: 88%;
}
.form-control {
width:-webkit-fill-available;
margin-top: 0px;
}
.contact-form {
top: 15%;
}
form .submit {
margin-top: -10px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Kayla Lindstrom">
<title>Flowers</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/model/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<ul class=nav>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#lessons">Lessons</a>
<ul>
<li><a href="#lessons">-Sign Up</a></li>
<li><a href="/view/curriculum.php">-Curriculum</a></li>
</ul></li>
<li><a href="#calendar">Calendar</a></li>
<li><a href="/view/contact.php">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="home" class="parallax1">
<div class="scs">
Flowers
</div>
<div class="circle">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<section>
<p>Where our mission is to Celebrate and Preserve American Swing-era music and dance and to expose the greater community to the Joys of Swing.</p>
<p>We'll achieve this through education, events, performances, and outreach. We aim to create opportunities for spectators, listeners, dancers, and musicians to interact with this American art form in their day-to-day lives.</p>
</section>
<div id="about" class="parallax2">
<div class="scs">
Flowers
</div>
</div>
<section class="left">
<iframe width="500" height="281" src="https://www.youtube.com/embed/PGmmSpuZ6Kw" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Swing music is a style of jazz that was dominant in the 1930s, and performed by jazz big bands primarily for dancing audiences. It reached broad audiences over the radio, on records, and in dance halls around the nation.</p>
<p>Swing music is characterized by a syncopated rhythm where all the beats are not evenly spaced in time. Familiar songs with this swing rhythm are Benny Goodman’s “Sing Sing Sing” and Duke Ellington’s “It Don’t Mean A Thing If It Ain’t Got That Swing”.</p>
<p>The syncopated swing rhythm made the music sound more lively, and also had the psychological effect of causing listeners to want to move with the music. The Charleston was a dance that was quite popular during the 1920s, and as jazz music took on stronger syncopations, the music began influencing how the dancers danced their dance. This caused a feedback with the live bands who would begin playing their music influenced by how the dancers in front of them were dancing. By the end of the '20s, this feedback between live bands and dancers evolved both the music and the dance into new forms: swing jazz (also called "swing music" or "big band jazz"), Lindy Hop (also called "swing dancing" or "the Jitterbug").</p>
<p>Lindy Hop is a partner dance and is the original form of Swing dancing created by teenagers in the 20's and 30's in Harlem, NY. Like hip hop is today, lindy hop was a street dance made up by youth responding to the popular music of the day, which was swing-era jazz.</p>
<p>This unique American art form spread around the globe in the years leading up to WWII thanks to representation in popular movies such as Keep Punchin’, A Day At the Races, and then Hellzapoppin. As jazz musicians began to play bop, dancers began to partner less and less, and lindy hop fell out of favor, but revivalists in the 1980s learned from some of the original great dancers and brought it back!</p>
<p>Today, we continue to dance to the swinging jazz music that inspired lindy hop in the first place, from artists such as Count Basie, Ella Fitzgerald, Duke Ellington, and many more.</p>
<p class="last">Lindy hop can be danced fast or slow, and it's for ages 3 to 103. Check out that video above for a great example what what lindy hop looks like!</p>
</section>
<div id="lessons" class="parallax3">
<div class="scs">
Lessons
</div>
</div>
<section class="lessons">
<p>Aren't these flowers just lovely</p>
</section>
<div id="calendar" class="parallax4">
<div class="scs">
calendar
</div>
</div>
<section>
<p>This is where I have a Calendar</p>
</section>
<footer>
<div class="fnav">
<p id="copy">© <?php echo date('Y', getlastmod()); ?> Flowers, All rights reserved.</p>
</div>
</footer>
<?php ob_end_flush(); ?>
</div>
</body>
</html>