Страница загрузки мобильных устройств увеличена

Question

Я сейчас работаю над проектом веб-сайта, и в целом все идет хорошо.Но по какой-то причине, когда я запускаю свой веб-сайт на мобильном устройстве, например, galaxy s5 или iphone 5, браузер увеличивается в левом верхнем углу.Я попытался отключить увеличение с помощью

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

, но оно только исправило панель навигации, а остальная часть тела осталась увеличенной.Это мой текущий метатег:

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

Я установил CSS для тела моей страницы на body {position: relative;}, а также

@media screen and (max-width: 700px) {body {position: absolute;}}

для устройств шириной менее 700 пикселей (поскольку это устраняет проблему «тело не заполняет всю ширину мобильного устройства»).

Я также установил CSS для моей панели навигации в «position: fixed;».

Мой сайт доступен здесь .Любые идеи о том, как я могу остановить мобильные устройства от увеличения моей веб-страницы при загрузке?Спасибо.

Answer 1

Вы установили размер шрифта для ".homeintrocontainer .homeintrohead" равным 80px, и вы не уменьшили размер шрифта для мобильных устройств.Можете ли вы уменьшить этот размер шрифта и проверить.Или, если вам нужен тот же размер шрифта, попробуйте добавить слово-break: break-all в класс .homeintrocontainer .homeintrohead.

.homeintrocontainer .homeintrohead {
text-align: center;
padding-bottom: 15px;
font-size: 30px; /*for reference just edited the font size*/
padding-top: 200px;
padding-bottom: 30px;
margin: 0 auto;
word-break: break-all;

}