时间戳

首页 > 解决方案 > 智能手机肖像在压缩的网站元素下方显示不需要的空间

html - 智能手机肖像在压缩的网站元素下方显示不需要的空间

问题描述

我一直在努力让我的网站元素在 PC 显示器和智能手机显示器上看起来都一样好。

我尝试在 head 部分添加元视口行，但这似乎并没有改变任何东西：

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

在我的桌面显示器上，该网站看起来像这样。

在此处输入图像描述

当我向下滚动时，没有额外的空间（这是我想要的）。

当我在智能手机上查看网站时，它看起来像这样：

在此处输入图像描述

正如你所看到的，元素被挤在最上面的角落里，它们下面有很多空闲空间。我意识到纵向视图和横向视图之间存在差异，但空间量对我来说似乎相当夸张。

当我将智能手机水平转动时，它看起来确实不错。但是，我希望用户在他们的智能手机上垂直查看网站，并且让元素占据更多的屏幕。

这是我的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;
}

除了使用我已经尝试过的视口线之外，我还有什么可以尝试的吗？

标签： htmlcsssvgresponsive-designmobile-website

解决方案

推荐阅读