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

Question

我用作网站的tumblr（johannesjakobi.tk）在桌面网络浏览器上运行良好，但在移动设备上，主要元素没有所需的宽范围（理想情况下填充屏幕的95％）。这是任何“宽度”参数的问题吗？

这就是它在移动google-和safari-browser上的外观。

非常感谢您的知识！

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

参见附图以供参考。