Why is my website not loading properly on Iphones?

Question

I am very new in this field, I'm learning about front-end development, and this is my second project and I don't know what it's the problem.

I recently created this website :

 $(document).ready(function(){ $('body').scrollspy({target:".navbar", offset: 50}); $('nav a').smoothScroll({offset: -40}); }); 

  body { position: relative, } body, html { height: 100%; } .div { display: block; } .navbar-inverse .navbar-nav>li>a { color: white; } .navbar { margin-bottom: 0px; font-size: 18px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { color: white; font-family: "Oleo Script", cursive; font-size: 25px; } i:hover { opacity: 0.4; } .bg { position: relative; background-image: url("https://raw.githubusercontent.com/Arielink90/project/master/image/pexels-photo-261577.jpeg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; color: white; } .text-stylin { font-family: 'Oleo Script', cursive; font-size: 50px; letter-spacing: 5px; } #front-end { letter-spacing: 10px; font-size: 25px; } .centered { position:absolute; left: 0; top: 45%; width: 100%; transform: translate(-50%, -50); } .centered a { color: white; } .header-icons { font-size: 40px; color: white; letter-spacing: 20px; } #about { background-color: rgb( 151, 150, 145); } .position { margin-top: 40px; margin-bottom: 40px; } .img-circle { border-radius: 50%; width: 200px; position: inherit; display: block; margin: auto; } .down { display: grid; top: 30px } #hello { font-family: monospace; } #presentation { font-size: 18px; text-align: justify; } #hayao:hover { opacity: .5; } #project { margin-bottom: 42px; } #work { font-weight: bold; font-size: 40px } #project .col-sm-4 { padding: 0; } #project .col-sm-4 { padding: 20px; } .zoom { position: relative; overflow: hidden; } .polaroid img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .polaroid:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } div.polaroid { background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-bottom: 25px; } .polaroid-text { text-align: center; padding: 10px 20px; } footer { background-color: rgb( 16, 16, 16); padding-bottom: 30px; } .color { color: white } .icons { font-size: 40px; letter-spacing: 20px; } .icons a { color: white; } 

  <div id="home" class="bg"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#home">Portfolio</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#project">Work</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="centered"> <h2 class="text-stylin">Ariel Yanes</h2> <h4 id="front-end">Front End Web Developer</h4> <div class="header-icons"> <i class="fa fa-github-square" aria-hidden="true"></i> <a href="https://www.freecodecamp.com/arielink90" Target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a> <a href="https://www.linkedin.com/in/ariel-yanes-albuerne-7a61b4121/" Target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> <a href="https://codepen.io/Arielink/" Target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a> </div> </div> </div> <div id="about" class="container-fluid"> <div class="row position"> <div class="col-sm-4"> <img class="img-circle" src="https://raw.githubusercontent.com/Arielink90/project/master/image/FaceQ2017_06_29_12_07_01.png" alt="avatar image"/> </div> <div id="presentation" class="col-sm-8 down"> <h2 id="hello" class="text-center">Hello and Welcome to my page!</h2> <p >I'm a front web developer student. Is being two-month sense I start in freeCodeCamp. I have learned a lot and I now the what a like is elegant and minimalistic web designs, that help the user to have a pleasant experience</p> </div> </div> </div> <div id="project" class="container-fluid"> <div class="row"> <h2 id="work" class="text-center">My Work</h2> <div class="col-sm-4"> <div class="polaroid"> <div class="zoom"> <a href="https://codepen.io/Arielink/full/GEWQwm/"><img class="img-responsive" src="https://raw.githubusercontent.com/Arielink90/project/master/image/CodePen%20-%20Hayao%20Miyazaki%20Tribute%20Page%20-%20Google%20Chrome%207_2_2017%2012_37_27%20PM.png" alt="project image"/></a> </div> <div class="polaroid-text"> <h4>Tribute Page</h4> </div> </div> </div> <div class="col-sm-4"> <div class="polaroid"> <div class="zoom"> <img class="img-responsive" src="https://raw.githubusercontent.com/Arielink90/project/master/image/Personal%20Portfolio%20-%20Google%20Chrome%207_2_2017%2012_38_37%20PM.png" alt="project image"/> </div> <div class="polaroid-text"> <h4>My Portfolio</h4> </div> </div> </div> <div class="col-sm-4"> <div class="polaroid"> <div class="zoom"> <img class="img-responsive" src="https://raw.githubusercontent.com/Arielink90/project/master/image/Creative%20-%20Start%20Bootstrap%20Theme%20-%20Google%20Chrome%207_2_2017%2012_56_01%20PM.png" alt="project image"/> </div> <div class="polaroid-text"> <h4>Future Poject</h4> </div> </div> </div> </div> </div> <footer id="contact"> <div class="container"> <div class="color text-center"> <h2>Contact Me</h2> <p>Name: Ariel Yanes Albuerne</p> <p>E-mail: xxxxxxxxxxx@gmail.com</p> <p>Phone Number: xxx-xxx-xxxx</p> <div class="icons text-center"> <i class="fa fa-github-square" aria-hidden="true"></i> <a href="https://www.freecodecamp.com/arielink90" Target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a> <a href="https://www.linkedin.com/in/ariel-yanes-albuerne-7a61b4121/" Target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> <a href="https://codepen.io/Arielink/" Target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a> </div> </div> </div> </footer> 

It's loading fine in computers and Android devices but not in iPhones and I can't find the reason. If someone can explain me the problem or give me any idea, it will be very helpful. Thanks.

Answer 1

It is probably because it is designed for larger screens and it kinda freaks out when there is a smaller screen use a media query in css like this

@media only screen and (min-width: 200px) {
    // insert css here that you want to be used when the screen size is bigger than 200px
}

Answer 2

尝试将此行添加到您的头部：

<meta name="viewport" content="width=device-width, initial-scale=1">