모바일에 반응하는 내 웹 사이트를 만드는 방법

여기 내 웹 사이트에 대한 링크가 있습니다. 노트북은 정상적으로 작동하지만 휴대 전화는 반응이 없습니다. 여기 내 사이트에 대한 링크입니다 https://ticketsoko.co.ke/ 및 follwing 어떻게 휴대 전화에 게재됩니다. 거기에 이미지를 크기를 조정할 수있는 휴대 전화에있는 방법이 있으며 바탕 화면에 보여주는 것과 동일하게 볼 수 있습니다. 모바일에 반응하는 내 웹 사이트를 만드는 방법

이것은 데스크톱에서 볼 때입니다. 내가 볼 수 있듯이

<head> 
    <meta charset="utf-8"> 
    <!--<meta name="viewport"--> 
    <!--  content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">--> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="icon" type="image/png" href="img/logoo.png"/> 
    <title>Click & Pay | TicketSoko</title> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans" rel="stylesheet" 
      type="text/css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
      <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" --> 
      <!-- integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> --> 
    <link rel="stylesheet" href="./css/main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet"> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> 
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style --> 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/style3.css"> 
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

</head> 

<body> 


<nav class=" navbar-default navbar-fixed-top" style="background-color:#f2f2f2;"> 

    <ul> 
     <img class="logo" src="img/logoo.png" alt="logo" style="height: 100px; width:250px; float:right;"> 
     </ul> 

</nav> 

<div class="container-fluid"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
      <br><br><br> 
      <div class="item active"> 
       <img src="img/image1.jpeg" alt="Los Angeles" style="width:100%; height:500px;"> 
      </div> 

      <div class="item"> 
       <img src="img/2.jpg" alt="Chicago" style="width:100%; height:480px;"> 
      </div> 

      <div class="item"> 
       <img src="img/3.jpg" alt="New york" style="width:100%; height:480px;"> 
      </div> 

     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div>

출처

2017-10-08 Wanjala Alex

부트 스트랩을 사용하고있는 것처럼 보입니다. 부트 스트랩 그리드 시스템을 사용하여 반응 형 디자인에 대해 더 자세히 읽어보십시오. https://v4-alpha.getbootstrap.com/layout/grid/ –

당신은 250 픽셀로 폭을 사용했다. 따라서 작은 화면이든 큰 화면이든 상관없이 항상 모든 화면의 250 픽셀을 차지합니다. 너비가 250 픽셀 밖에 안되는 화면에서이 웹 사이트를 디자인했다면 화면에 완전히 렌더링됩니다. 그리고 만약 당신이 큰 화면에서 그것을 실행한다면 그것은 또한 단지 250 px를 가져갈 것이고 나머지 픽셀은 렌더링되지 않을 것입니다.

따라서 percentage for the widths을 사용해야합니다. 왼쪽에서 오른쪽으로, 화면의 50 %에서 구성 요소를 그려야하는 경우와 같습니다. 그런 다음 너비를 50 %로 지정하십시오. 그렇게하면 반응이 좋을 수 있습니다. 그리고 미디어 쿼리를 사용할 수도 있습니다. 미디어 쿼리에 대해서도 읽으십시오.

희망이 도움이 될 것입니다.

출처

2017-10-08 08:54:32

모바일에 반응하는 내 웹 사이트를 만드는 방법

답변

관련 문제