宽度参数的问题：网站（通过tumblr）不在移动设备上100％启用

Question

我用作网站的这个tumblr（johannesjakobi.tk）在台式机Web浏览器上效果很好，但在移动设备上，主要元素没有理想的宽范围（理想情况下，屏幕填充率为95％） 。任何“宽度”参数有问题吗？

这是在移动google-和safari-浏览器上的外观。

非常感谢您的知识！

Answer 1

我认为问题在于您的导航。图像似乎正在调整为视口宽度。

对于导航，我要么实现它：

#top nav a {
      display: inline-block;
}

或者，如果您只是希望将其用于特定的媒体查询捕捉点：

@media (max-width: 600px) {
   #top nav a {
      display: inline-block;
   }
}

或者您可以将display属性更改为block。这会将每个锚创建为具有100％宽度的块元素。我还添加了向左对齐的文本（我只会在移动设备上实现此功能，否则它将使您的导航彼此叠加，这在桌面上就没有多大意义了。）

@media (max-width: 600px) {
    #top nav a {
       display: block;
       text-align: left;
    }
}

请参阅所附图像以供参考。