如何使视口能够查看页面中心？

Question

我有一个网页，它不是真正的响应，但我试图让它至少在手机上更友好。请参阅：http://maguss.org

我当前的视口是：<meta name="viewport" content="width=500, initial-scale=1">

看起来相当不错，但整个视图位于页面的左侧。我想强迫它集中。

我在这里浏览但找不到任何答案。

Answer 1

理想情况下，您应该将宽度设为设备宽度，如下所示

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

然后使用媒体查询来更改页面的行为。

Answer 2

在你的样式的顶部添加：

html, 
body {
   width:100%; 
   height: 100%;
   position: relative; 
}

接下来找到此规则集：

.main{
    height:100%;
    width:100%;
    top: 0;
    left: 0;
}

将其更改为：

.main{
    height:100vh;
    width:100vw;
    position:relative; // or absolute; you need to test it.
    top: 0;
    left: 0;
}