1
私は、画面サイズに応じて3つのレイアウトが必要な課題のための簡単なウェブページを作成しようとしています。 Hereさんの割り当てです。デスクトップ上ではすべてうまく動作しています。レイアウトは予期したとおりで、ブラウザウィンドウの幅を変更すると変更されます。あなたはそれを自分で試すことができますhere。モバイルでウェブページのテキストサイズが一致しません
モバイルでは、奇妙な問題があります。テキストボックスの1つが他のサイズより大きなサイズを持っていて、なぜその理由が分かりません。
は、ここでは、Chromeでデスクトップ上で次のようになります。 
これは私がそれのように見てみたい正確にどのようにあります。しかし、ここでモバイルビューは、クロームのdevのツールでデバイスエミュレータを使用して、です：
あなたが見ることができるように、青色のボックス内のテキストは、他の2つ以上の方法も大きい、と私は理由は分かりません、私はフォントのサイズを全く混乱させなかったからです。
ここではHTMLです：
<!DOCTYPE html>
<html>
<head>
<title>The Best Colors</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;
</head>
<body>
<h1>The Best Colors</h1>
<div id="container">
<div id="yellow">
<h2>Yellow</h2>
<p>Yellow is the best of the best. It is the color of a brightness, of a sunny day after the winter, of sunflowers and fresh lemons. It brings to mind warmth and happiness and cheerfulness. It is the color of optimism and positivity. Yellow is also the title of a very relaxing Coldplay song. </p>
</div>
<div id="green">
<h2>Green</h2>
<p>Green is the color of nature. It brings to mind forests full of life, fields full of bounty. It is the color of spring and youth. Green also symbolises fertility and good health, though also envy. Green is also the color associated with life, since most terran vegeation is green. It's a pretty good color overall.</p>
</div>
<div id="blue">
<h2>Blue</h2>
<p>Ah, blue. Blue is the color of the infinite. The skies above and the seas below, limitless and full of possibilities and wonders, are both blue. It also has a lot of energy, being on of the higher frequency colors. It is also associated with masculinity and boys, the counterpoint to the classic pink, though this association has been getting less popular. </p>
</div>
</div>
</body>
</html>
とCSS：
div{
margin: 0.5%;
box-sizing: border-box;
}
body{
background-color: #C0C0C0;
}
div#yellow, div#green, div#blue{
border: 2px solid black;
}
h1{
font-size: 250%;
font-family: times;
font-weight: bold;
font-style: italic;
text-align: center;
width: 100%;
}
h2{
float: right;
width: 25%;
text-align: center;
font-weight: bold;
margin: 0px;
border-top: 0;
border-right: 0;
border-bottom: 2px solid black;
border-left: 2px solid black;
}
p{
clear: both;
padding: 10px;
text-align: justify;
font-family: serif;
}
div#yellow{
color: red;
background-color: yellow;
}
div#green{
color: black;
background-color: green;
}
div#blue{
color: white;
background-color: blue;
}
div#yellow > h2{
color: yellow;
background-color: red;
}
div#green > h2{
color: green;
background-color: black;
}
div#blue > h2{
color: blue;
background-color: white
}
@media (max-width: 767px){
div#container{
position: relative;
overflow: hidden;
}
div#yellow, div#green, div#blue{
float: left;
clear: both;
}
}
@media (min-width: 768px) and (max-width: 991px){
div#container{
position: relative;
overflow: hidden;
}
div#yellow, div#green{
float: left;
width: 49%;
}
div#blue{
clear: both;
width: 99%;
}
}
@media (min-width: 992px){
div#container{
position: relative;
overflow: hidden;
}
div#yellow, div#green, div#blue{
float: left;
width: 31%;
}
}
そして私はちょうど上の画像は、667の幅を持っており、CSSであるため、単一列のレイアウトを使用してする必要があることを実現私のカットオフは767pxです。
モバイルでサイトが大きく異なるように見える点についての説明はありますか？私はズームなどを無効にするメタタグで十分だと思ったが、明らかにそれでは不十分だ。
間違っていると青色のボックスは、それが持っているとして大きいですより多くの行を他の。私はまだ他の問題を見ることができません。 –
問題はあなたが言及したものです。フォントサイズは指定しません。それをやってみて、それはあなたのためにそれを並べ替える必要があります。すべてのブラウザには、いくつかの要素のデフォルト値があることを覚えておいてください。 – Gezzasa