如何使移动网页适合，而不滚动到一边
如何使移动网页适合，而不滚动到一边
提问于 2019-02-10 00:49:48
我正在开发一个网页，它在从个人电脑上观看时工作得很好，但当它达到手机大小时(例如，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
Stack Overflow用户
发布于 2019-02-10 05:46:06
用这个：
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />Stack Overflow用户
发布于 2019-02-10 16:37:39
我更新了小提琴。请在这里找到它：https://jsfiddle.net/vyrs1ajk/
问题是页面底部的div。您已经给出了固定宽度的缩略图类和img_queijo类，这是我从css中删除的。我还将那些div的所有类更改为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54612336
复制相关文章
相似问题
腾讯云开发者
