Как настроить мобильную веб-страницу без прокрутки в сторону - PullRequest
Новая
       6

Как настроить мобильную веб-страницу без прокрутки в сторону

0 голосов
/ 10 февраля 2019

Я разрабатываю веб-страницу, которая прекрасно работает при просмотре с ПК, но когда она подходит к размеру мобильного телефона (iphone 6/7, например), все становится немного грязно.

Моя борьба заключается в следующем: когда я изменяю размер окна, чтобы проверить реакцию веб-страницы с мобильной точки зрения, мне нужно прокрутить страницу, чтобы увидеть полную страницу.Есть свойства css или команда для установки размера страницы экрана мобильного устройства?

Сейчас я использую медиазапросы, пример того, который я использую: 

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {}

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Я обновил скрипку.Пожалуйста, найдите его здесь: https://jsfiddle.net/vyrs1ajk/

Проблема заключалась в том, что ваши div-ы внизу страницы.Вы дали фиксированную ширину классу миниатюр и классу img_queijo, который я удалил из css.Я также изменил все классы для этих дивов на class="col-lg-4 col-md-4 col-sm-4 col-xs-4"

@font-face {
	font-family: 'Conv_FREESCPT';
	src: local('☺'), url('../fonte/FREESCPT.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

hr{
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
    width: 75%;
    margin-top: 0;
}

h1, h2, h3, h4, h5{
    font-family:'Conv_FREESCPT';
}

h2{
    font-size: 40px;
}

h3{
    font-size: 33px;
}

h4{
    font-size: 36px;
}

p{
    text-align: center;
    letter-spacing: .05em;
    margin-left: 68%;
    width: 80%;
    font-family:'Conv_FREESCPT';
    font-size: 27px;
}

#logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    width: 30%;
}

.caption{
    text-align: center; 
}

.botao{
    text-align: center;
    margin-bottom: 50px;
    margin-top: 25px;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      
      
      body {
      background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/1200px-Flag_of_France.svg.png");
      background-repeat: no-repeat;
      background-size: 20% 100%;
      background-position: 15px;
      z-index: -1; position:relative;
    }
      @font-face {
    	font-family: 'Conv_FREESCPT';
    	src: local('☺'), url('../fonte/FREESCPT.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
    }
      
    #logo{
        display: block;
        margin-left: 220px;
        margin-right: 80px;
        margin-bottom: 100px;
        width: 60%;
    }
      
    h2{
        font-size: 40px;
        margin-left: 225px;
    }
    
    hr{
        height: 12px;
        border: 0;
        box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
        width: 75%;
        margin-top: 0;
        margin-left: 165px;
    }
    
    p{
        text-align: center;
        letter-spacing: .05em;
        margin-left: 41%;
        width: 80%;
        font-family:'Conv_FREESCPT';
        font-size: 35px;
        line-height: 1;
    }
    
    .botao{
        text-align: center;
        margin-bottom: 50px;
        margin-top: 25px;
        margin-left: 220px;
    }
    
    .thumbnail{
        width: 300px; 
        overflow: auto;
        margin-left: 100px;
    }
    
}
<!DOCTYPE html>
<html>
    <head>
        <!-- Make site responsive on mobile/tablet -->
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />

        <title>Le Fromage</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="/stylesheets/tudo.css">
        

        <!-- Material Design Bootstrap -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">
        
    </head>
    <body>
    <nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="/"> <img src="logo_semtexto.png" style="width: 50px; float: left"> Le Fromage</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="/quemsomos">Quem somos</a></li>
            <li><a href="/ondenosencontrar">Onde nos encontrar</a></li>
            <li><a href="/#produtos">Produtos</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
                  <li><a href="/contato">Contato</a></li>
          </ul>
        </div>
    </div>
</nav>
    
    <link rel="stylesheet" href="/stylesheets/main.css">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />

<img class="animated fadeInUp" id = "logo" src="logo.png">


<div class="container">
    <div class="row">
        <div class="col-lg-12"> <h2 style="text-align: center">NOSSA MISSÃO</h2></div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6 col-sm-12"> <p class="colunas"> Fabricar queijos de cabra, em pequenas quantidades, utilizando ingredientes e seguindo o processo idêntico aos queijos franceses artesanais; tudo feito dentro dos melhores padrões de higiene e qualidade com textura e gosto que satisfaçam nossos clientes.</p> </div>
    </div>

    <div class="botao">
        <a class="btn btn-primary btn-large" href="quemsomos" >Mais detalhes!</a>
    </div>
    
    <div class="row">
        <div class="col-lg-12" id="produtos"> <h2 style="text-align: center">NOSSOS PRODUTOS</h2></div>
        <hr>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="thumbnail">
                <img class="img_queijo" src="massa_fresca.jpg">
                   <div class="caption">
                       <h4> <a href="massafresca">Queijos Massa fresca</a></h4>
                   </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="thumbnail">
                <img class="img_queijo" src="massa_mole.jpg">
                   <div class="caption">
                       <h4> <a href="massamole">Queijos Massa mole afinado</a></h4>
                   </div>
            </div>
        </div>
        
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="thumbnail">
                <img class="img_queijo" src="massa_semidura.jpg">
                   <div class="caption">
                       <h4><a href="massasemidura">Queijos Massa semidura</a></h4>
                   </div>
            </div>
        </div>
    </div>
  
    <h3>Confira com mais detalhes, cada um de nossos produtos!</h3>
    
</div>
    
    
    </body>
</html>
0 голосов
/ 10 февраля 2019

Используйте это: 

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...