Смартфон портрет отображает нежелательное пространство под сжатыми элементами сайта - PullRequest
Новая
       32

Смартфон портрет отображает нежелательное пространство под сжатыми элементами сайта

0 голосов
/ 03 июня 2018

Я старался, чтобы элементы моего сайта выглядели одинаково хорошо как на мониторах ПК, так и на экранах смартфонов.

Я попытался добавить строку метапортпорта в разделе заголовка, но это, похоже, ничего не изменило: 

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

На моем рабочем столе сайт выглядит так.

enter image description here

Когда я прокручиваю вниз, больше нет места (что я и хочу).

Когда я просматриваю веб-сайт намой смартфон выглядит следующим образом:

enter image description here

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

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

Вот мой html: 

<html>

<head>

<link rel="stylesheet" href="css/bootstrap-4.0.0-dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="css/pagestyle.css">

<style type="text/css">


.tuner {position: relative; left:50%; transform:translateX(-50%); margin-top:5%; }
.alttunings {position: absolute; left: 5%; top: 50px; width: 180px;}
.btn-default:hover{background-color:#CCCCCC;border-color:#CCCCCC}

</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>


<div class="tuner">
<object type="image/svg+xml" data="media/standard-tuning.svg">
</object>
<div class="alttunings">

<p>  <button type="button" class="btn btn-block selectedtuning" width=230px>Standard Tuning</button>
  </p>

<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Open D Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Drop D Tuning</button>
</p>
<p> <button type="button" class="btn btn-block unselectedtuning" width=230px>Open G Tuning</button>
</p>
</div> 
</div>


<script type="text/javascript" src="js/script1.js" defer></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>


</html>

Вот моя главная страница css: 

body {
background-color: #C1C1C1;  
width: auto;
}

Есть ли что-то еще, что я могу попробовать, кроме использования строки вида, котораяЯ уже пробовал?

...