Question

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

我尝试在头部添加元视口行，但这似乎没有改变任何内容：

<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;
}

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

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

0 个答案: