enter image description here 为什么屏幕右侧是白色条纹？ 问题只出在智能手机上。 我用过bootstrap：
的index.html ::
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="jquery-3.2.0.min.js" ></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="header-wrap">
<div class="container-fluid">
<div id="nav-left">
<ul class="nav navbar-nav navbar-left">
<li>+7(495)123-45-67</li>
</ul>
</div>
<div id="nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Главная</a></li>
<li><a href="works.html">Работы</a></li>
<li><a href="#">Обо Мне</a></li>
</ul>
</div>
<div class="row centered">
<div class="col-lg-8 col-lg-offset-2">
<center>
<h1 id="head">Дизайн</h1>
<h1>И</h1>
<h1>Архетектурная визуализация</h1>
<p>E-Mail:example@mail.ru</p>
</center>
</div>
</div>
</div>
</div>
<div id="preferences">
<div class="container-fluid">
<h1>Преимущества работы с нами:</h1>
<hr/>
<div class="row">
<div class="col-lg-4">
<center>
<img src="images/29.png" alt=""><br>
<p>Высокая скорость выполнения заказа</p>
</center>
</div>
<div class="col-lg-4">
<center>
<img src="images/8.png" alt=""><br>
<p>Низкая цена за квкадратный метр</p>
</center>
</div>
<div class="col-lg-4">
<center>
<img id="mike" src="images/12.png" alt=""><br>
<p>Связь 24/7</p>
</center>
</div>
</div>
</div>
</div>
<div id="works">
<div class="container-fluid">
<h1>Работы:</h1>
<hr><br>
<div class="row centered">
<center>
<img class="img-thumbnail" src="images/house.jpg" alt="Дом в Италии">
<h1>Дом в Италии</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries</p>
<hr>
<img class="img-thumbnail" src="images/cafe.jpg" alt="Кафе и ресторан в здании старого завода в Гааге">
<h1>Кафе и ресторан в здании старого завода в Гааге</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries</p>
<hr>
<img class="img-thumbnail" src="images/house_2.jpg" alt="Дом в Италии">
<h1>Домик в Португалии</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries</p>
<hr>
<img class="img-thumbnail" src="images/hospital.jpg" alt="Дом в Италии">
<h1>Здание лечебницы в Нидерландах</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries</p>
<hr>
</center>
</div>
</div>
</div>
<div id="consultation">
<center>
<form role="form" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Ваш E-Mail:">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Номер телефона:">
</div>
<button class="btn btn-primary">Получить бесплатную консультацию</button>
</form>
</center>
</div>
<div id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 lefted">
<p>All rights reserved © 2017</p>
</div>
<div class="col-lg-6 righted">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-vk"></i></a>
<a href="#"><i class="fa fa-twitter-square"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
的CSS ::
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
/* Общие стили */
body{
font-family: 'Poiret One';
}
i {
font-family: fontawesome !important;
}
h1{
color: #eaeaea;
font-family: 'Poiret One';
font-size: 50px;
}
.centered{
text-align: center;
}
.righted{
text-align: right;
}
.lefted{
text-align: left;
}
/* Стили головной части сайта */
#nav-left{
font-size: 20px;
color: #eaeaea;
}
#nav-left ul li{
color: #eaeaea;
margin-top: 17px;
margin-left:10px;
}
#nav{
font-size: 15px;
color: #eaeaea;
}
#nav ul li a{
color: #eaeaea;
margin-top: 10px;
margin-left:10px;
border-radius: 10px;
font-size: 20px;
}
#nav ul li a:hover{
text-decoration: #eaeaea;
background-color: rgba(158, 158, 163,0.5);
}
.active a{
background-color: rgba(158, 158, 163,0.5);
}
#header-wrap{
width: 100%;
background: url("../images/header.jpg") no-repeat center center;
background-position: center center;
min-height: 500px;
background-size: 100%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header-wrap #head{
margin-top: 60px;
font-weight: 300;
}
#header-wrap p{
color: white;
font-size: 15px;
margin-top: 90px;
}
/* Блок о преимуществах */
#preferences{
width: 100%;
min-height: 400px;
background-color: #0fcbff;
border-top: 3px solid white;
}
#preferences h1{
text-align: center;
}
#preferences .container hr{
width: 60%;
}
#preferences p{
font-size: 25px;
color: white;
width: 80%;
}
#preferences #mike{
width: 200px;
height: 150px;
}
/* Блок о работах */
#works{
width: 100%;
min-height: 400px;
background-color: #06cece;
border-top: 3px solid white;
}
#works h1{
text-align: center;
}
#works hr{
width: 40%;
}
#works img{
height: 400px;
margin-top: 50px;
}
#works p{
font-size: 15px;
color: white;
width: 50%;
}
#consultation{
border-top: 3px solid white;
background: #6f776f;
height: 100px;
}
#consultation form .form-group{
margin-top: 30px;
}
#consultation button{
margin-top: 30px;
}
#footer{
border-top: 3px solid white;
min-height: 100px;
background-color: #1f4863;
}
#footer i {
margin-top: 50px;
font-size: 30px;
margin-left: 5px;
color: #f2f2f2;
}
#footer p{
font-size: 15px;
color: #f2f2f2;
margin-top: 50px;
}
问题始于chrome中开发人员工具的320 px宽度。 但实际上它是从480px开始的（我试用了我的智能手机，宽度为480像素） 你可以在那里试试：enter link description here unphilosophic-diagr.000webhostapp.com
答案 0 :(得分：1)
当页面出现溢出时，通常会出现此类问题。我可以通过链接看到网站顶部的h1太大而不适合视口，因此溢出。
您可以使用媒体查询来更改h1 font-size，以免出现溢出，例如：
@media screen and (max-width: 480px) {
h1 {
font-size: 30px;
}
}
答案 1 :(得分：0)
font-size in line：13 style.css
h1{
color: #eaeaea;
font-family: 'Poiret One';
font-size: 50px;
}
你可以解决：
h1{
color: #eaeaea;
font-family: 'Poiret One';
font-size: 30px;
}