我不是 bootstrap/html/css 专家，我最近开始弄乱一些模板/代码，并开始为我的姐夫做一个网站。
我对结果非常满意，对于第一次尝试和 4 天后我可以说我实现了我想要的。但是，移动版本似乎无法在所有浏览器/分辨率上正常运行。我不知道我做错了什么。我在 Chrome 上试过我的 Xperia ZL，一切看起来都很好。不过在 iPhone 上，它看起来像这样 http://i.imgur.com/ZTWyxX0.png . (网站:http://www.maconneriesdi.com)
如您所见，“关于”部分与 iPhone 上的“工作”部分重叠(几乎是 720p)。我试过我的 Xperia S (720p) 并遇到了同样的问题。尝试使用不同的浏览器。在 iPad 和 Xperia ZL(1080p) 上，该网站看起来不错。当我将计算机上的窗口 (1400x900) 调整到最小时，我在测试的每个浏览器上也没有这个问题。另外，我在网站上使用的字体不适用于移动设备。
这是我的代码
<head>
<title>Maçonnerie SDI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/grayscale.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&subset=cyrillic,cyrillic-ext,latin,greek-ext,greek,latin-ext,vietnamese' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
</head>
这里是“关于”部分
<!--ABOUT SECTION-->
<div class="row">
<section id="about" class="container content-section text-center">
<div class="row">
<h1 class="col-xs-8 col-xs-offset-2 text-uppercase"><strong>À propos de nous</strong></h1>
<div class="row">
<p class="col-xs-8 col-xs-offset-2 lead">Dans une industrie de plus en plus compétitive telle que la maçonnerie, rares sont ceux qui se démarquent.</p>
</div>
<div class="row">
<p class="col-xs-8 col-xs-offset-2 lead">Constamment à la recherche de la perfection en matière de rapidité, d'efficacité et d'exactitude, Maçonnerie SDI allie expérience et énergie pour mener à terme tous ses projets indépendamment de ses envergures.</p>
</div>
<div class="row">
<p class="col-xs-8 col-xs-offset-2 lead">Forte de son ambition et de sa volonté, elle s'impose déjà comme un des leaders de sa catégorie en maçonnerie au Québec.</p>
</div>
</div>
</section>
</div>
<!--WORK SECTION-->
<div id="work" class="row">
<div class="jumbotron">
<div class="container">
<h2 class="text-uppercase text-center">Réalisations</h2>
<button type="button" class="btn btn-sm center-block" data-toggle="collapse" data-target="#gallery">Voir projets</button>
</div><!--div container-->
</div><!--div collape-->
</div>
CSS:
body {
width: 100%;
height: 100%;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
color: #000;
background-color: #fff;
}
html {
width: 100%;
height: 100%;
}
我做错了什么？
最佳答案
您已将 about ID 的高度硬编码为 400px。这在大屏幕上很好，但当文本在小屏幕上换行时，它会将尺寸推得更大。尝试将 #about 高度更改为 550px，当我刚刚在响应式设计模式下在 iPhone 4S(一个非常小的设备)上测试您的实时站点链接时，这对我有用。
新代码应该是这样的
#about {padding-top:100px;height:550px;color: #000; background-color: #fff;}
另外，作为一般规则，在 HTML 文档中使用样式规则并不是一个好主意。它最终变得困惑，意味着您不能在其他地方重用这些规则。始终创建一个 css 文件并将所有样式规则存储在那里，然后在标题中调用该文件。
编辑:
更好的解决方案是 H. Allen 建议完全删除高度参数，但如果你想保留它们，那就是你需要做的改变。
关于html - Bootstrap 在某些设备上困惑/重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36465786/