时间戳

首页 > 解决方案 > 如何让我的网站在移动设备上看起来更好？

html - 如何让我的网站在移动设备上看起来更好？

问题描述

我有这个网站的问题。它看起来正是我在 PC 上想要的样子，所以我得到了一些托管服务和域，我试着在我的手机上打开它，它看起来非常荒谬：

我在某处读到，添加这一行应该可以解决这个问题 ** ** 但我没有：/（我是编程新手，所以请怜悯我）。

这是我的代码：

<html lang="en">
<title>Dream Car</title>
<meta charset="UTF-8">
<meta name="Author" content="Marko Misic">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
  .tabela{
    z-index: -1
  }
  body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("auto.jpg");

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
body {font-family: "Lato", sans-serif}
h3{
  font-size: 250%; color:black; border-bottom:rgb(222, 78, 0);    
}
.ekipatext{
  text-align: center; margin-left: 100px  
}
.bg.image{
  background-image: url(auto.jpg);  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.mySlides {display: none}
</style>
<body>

<!-- Navigacija -->>
  <div class="w3-bar w3-black w3-card">
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a href="https://www.instagram.com/dream_car_ng/" class="w3-bar-item w3-padding-large w3-hover-red w3-hide-small "><i class="fa fa-instagram"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">POČETNA</a>
    <a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">EKIPA</a>
    <a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SHOP</a>
    <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">KONTAKT</a>
    
     <p class="">
    
    
    <a href="https://www.instagram.com/dream_car_ng/" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-instagram"></i></a>
  </div>
</div>

<!-- Navigacija za male ekrane -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">EKIPA</a>
  <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">SHOP</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">KONTAKT</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">SHOP</a>
</div>

<!-- Sadrzaj -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">

  <!-- Slideshow ako mi se digne patka da ubacim -->
  <div class=" w3-display-container w3-center">
    <img src="dreamcar1.jpg.jpg" style="width: 100%"  style="height:%">
    
 <div class="w3-container w3-content w3-padding-64  " style="max-height: 200px;background-color: black; max-width: 100%  " id="dream car">  
  <h3 class=" w3-wide"><img src="logodreamcar.png"></h3>
  </div>
<div class="w3-black w3-conten w3-border">
  <h4>
   <iframe width="85%" height="900" src="https://www.youtube.com/embed/B7gRS74ODsM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </h4>
  <!-- Ekipa -->
  <div class="w3-container w3-black w3-content w3-center  w3-padding-64" style="max-width:100%" id="band">
  
    <h2 class="w3-wide">EKIPA</h2>
    <p class="w3-opacity"><i>We love cars</i></p>
    <div class="ekipatext">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad a da da d ad ad a d ad a d ad a wd aw dw d awd aw dwa aw d awd wad  nd b f  vhudfsg dfijsg ishfdg dsfg hdsfug hdsfiug bhudfsg ufds giuhdfsogh usdhfg uisdhfg uisdhfgi hsfdiughi usdhfgiuhsdf iughdsiuf hguidsfhg uidshf giuhsdiufhg iudshfg uihdsfgiu hdiusfhg iudshfg uhdsfug hdsiufh giudshfg iusdh giudsfhg iudfhsg iuhsigu hsfdui ghiusdfhg uidfgui hsdfiuh guidfhs giusdhfg iuhdsfguihdfgiuhfdsiuhguidfhguidshgiufdhgiudhfguifdgiu//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// dasuhfiuadshfiuadhfuisdahuf asdf //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ufw hfudsh fuisdh fiusdhfiusdhf iushdf iuds f</p>
    </div>
    <div class="w3-row w3-padding-32" style="margin-left: 25%">
      <div class="w3-third">
        <p>Nikola Cokic</p>
            
        <p><img src="cokics.jpg" class="w3-round w3-margin-bottom" alt="Nikola Cokic" style="width:60%"></p>
       <p> <a href="https://www.instagram.com/_cokic/" class="w3-padding-large w3-hover-orange w3-border w3-hide-small "><i class="fa fa-instagram"></i>_cokic</a></p>
      </div>
      <div class="w3-third" style="margin-right:  30%">
        <p>Marko Murganovic</p>
        <img src="murga1.jpg" class="w3-round w3-margin-bottom" alt="Marko Murganovic" style="width:60%; height:465px" >
        <p> <a href="https://www.instagram.com/murga_001/" class="w3-padding-large w3-hover-orange w3-border w3-hide-small "><i class="fa fa-instagram"></i>murga_001</a></p>

      </div>
      <div class="w3-third" id="tabela">
        
      </div>
    </div>
  </div>

  <!-- Shop banner -->
  <div class="w3-black" id="tour">
    <div class="w3-container w3-content w3-padding-64" style="max-width:800px">
      <h2 class="w3-wide w3-center">SHOP</h2>
      <p class="w3-opacity w3-center"><i></i></p><br>




<!----Ovde se namest ashop kasnije---->

      <ul class="w3-ul w3-border w3-white w3-text-grey">
        <li class="w3-padding"> <span class="w3-tag w3-red w3-margin-left"></span></li>
        <li class="w3-padding"> <span class="w3-tag w3-red w3-margin-left"></span></li>
        <li class="w3-padding"> <span class="w3-badge w3-right w3-margin-right"></span></li>
      </ul>

      <div class="w3-row-padding w3-padding-32" style="margin:0 -16px">
        <div class="w3-third w3-margin-bottom">
          <img src="/w3images/newyork.jpg" alt="Proizvod" style="width:100%; height: 500px" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Proizvod</b></p>
            <p class="w3-opacity"></p>
            <p></p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Naruci!</button>
          </div>
        </div>
        <div class="w3-third w3-margin-bottom">
          <img src="/w3images/paris.jpg" alt="Proizvod" style="width:100%; height: 500px" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Proizvod</b></p>
            <p class="w3-opacity"></p>
            <p></p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Naruci!</button>
          </div>
        </div>
        <div class="w3-third w3-margin-bottom">
          <img src="/w3images/sanfran.jpg" alt="Proizvod" style="width:100%; height: 500px" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Proizvod</b></p>
            <p class="w3-opacity"></p>
            <p></p>
            <button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Naruci!</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Shop modal -->
  <div id="ticketModal" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
      <header class="w3-container w3-teal w3-center w3-padding-32"> 
        <span onclick="document.getElementById('ticketModal').style.display='none'" 
       class="w3-button w3-teal w3-xlarge w3-display-topright">×</span>
        <h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-right"></i>Naruci</h2>
      </header>
      <div class="w3-container">
        <p><label><i class="fa fa-shopping-cart"></i></label></p>
        <input class="w3-input w3-border" type="text" placeholder="Koliko?">
        <p><label><i class="fa fa-user"></i> Send To</label></p>
        <input class="w3-input w3-border" type="text" placeholder="E-mail">
        <button class="w3-button w3-block w3-teal w3-padding-16 w3-section w3-right">PLATI <i class="fa fa-check"></i></button>
        <button style="margin-left:7%" class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">Close <i class="fa fa-remove"></i></button>
        <p class="w3-right">Need <a href="#" class="w3-text-blue">help?</a></p>
      </div>
    </div>
  </div>

  <!-- Kontakt -->
  <div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
    <h2 class="w3-wide w3-center">KONTAKT</h2>
    <p class="w3-opacity w3-center"><i>Imas neku poruku? Ostavi je ovde!</i></p>
    <div class="w3-row w3-padding-32">
      <div class="w3-col m6 w3-large w3-margin-bottom">
        <i class="fa fa-map-marker" style="width:30px"></i>Negotin, Serbia<br>
        <i class="fa fa-phone" style="width:30px"></i> Phone: +381 ... ...<br>
        <i class="fa fa-envelope" style="width:30px"> </i> Email: Dreamcarab@gmail.com<br>
      </div>
      <div class="w3-col m6">
        <form action="/action_page.php" target="_blank">
          <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="Ime" required name="Name">
            </div>
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="E-mail adresa" required name="Email">
            </div>
          </div>
          <input class="w3-input w3-border" type="text" placeholder="Poruka" required name="Message">
          <button class="w3-border w3-button w3-black w3-section w3-right" type="submit">POSALJI</button>
        </form>
      </div>
    </div>
  </div>
  
<!-- kraj -->
</div>

<!-- footer -->
<div class="bg-image"></div>

<div class="bg-text">
  <h1>LINKOVI</h1>
  <h1><i class="fa fa-facebook-official w3-hover-opacity"></i>
  <a href="https://www.instagram.com/dream_car_ng/" class=" w3-hover-opacity"><i class="fa fa-instagram"></i></a>
  <a href="https://www.youtube.com/channel/UCH-qdkK4TvMV6KMrjkW0NDw"><i class="fa fa-youtube w3-hover-opacity"></i>
  </h1>
</div>


<script>
// Automatic Slideshow - change image every 4 seconds
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 4000);    
}

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}

// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

标签： htmlcss

解决方案

你需要学习响应式网页设计，你不能只添加元标记并期望你的网站变得对移动设备友好（我知道，这令人失望）。您必须添加媒体查询并在必要时使用 vh、vw、rem 和百分比。Freecodecamp 有很好的响应式网页设计课程。确保保留该元标记，否则媒体查询将无法在其他设备上运行。

并且请确保在发布问题之前搜索答案，否则您将获得否决票

推荐阅读