2
私はブートストラップ/ 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%;
}
は私が間違って何をやっているの？