Веб-страница имеет непоследовательный размер текста на мобильном телефоне

Я пытаюсь создать простую веб-страницу для задания, которое должно иметь 3 разных макета в зависимости от размера экрана. Here. Все работает нормально на рабочем столе - макет, как я ожидаю, и изменяется при изменении ширины окна браузера. Вы можете попробовать это самостоятельно here.Веб-страница имеет непоследовательный размер текста на мобильном телефоне

На мобильных устройствах, однако, есть странная проблема. Один из текстовых полей имеет размер больше, чем другие, и я не могу понять, почему.

Вот как это выглядит на рабочем столе в Chrome:

Это именно то, как я хочу выглядеть. Но вот мобильный вид, используя эмулятор устройства в хромированных инструментов Дев:

Как вы можете видеть, текст в синей коробке путь больше, чем два других, и я понятия не имею, почему, так как я вообще не вмешивался в размер шрифта.

Вот 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 мой отсек для этого - 767 пикселей.

Любые указания относительно того, почему сайт выглядит так по-другому на мобильных устройствах? Я думал, что метатег, который отключил масштабирование и т. Д., Должен быть достаточным, но явно этого недостаточно.

источник

2016-06-15 hoodakaushal

хорошо с точки зрения рабочего стола я могу увидеть 3 столбца в одной строке и синяя коробка больше, как это имеет больше строк, затем других. Я еще не вижу другой проблемы. –

Проблема в том, что вы упомянули. Вы не указываете размер шрифта. Попытайтесь это сделать, он должен разобраться в вас. Помните, что у всех браузеров есть значения по умолчанию для некоторых элементов. – Gezzasa

Ваш метатег неправильно внедрен и не закрыт. Заменить этот мета-тег Вот ваш ответ:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В коде: Это неправильно

<meta name="”viewport”" content="”width=device-width;" initial-scale="1.0;" maximum-scale="1.0;" user-scalable="no;" <="" head="">

источник

2016-06-15 07:01:07 SESN

Веб-страница имеет непоследовательный размер текста на мобильном телефоне

ответ

Смежные вопросы