css - 对width参数: Website (via tumblr) is not on 100% on mobile devices的提问

Question

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

这是它在手机上的样子 google-和 safari-浏览器。

非常感谢您的知识!

Answer 1

我认为问题出在您的导航上。图像似乎正在调整为视口(viewport)宽度。

对于导航，我要么实现这个:

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

或者，如果您只想将它​​用于特定的媒体查询快照点:

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

或者您可以将display 属性更改为block。这会将每个 anchor 创建为具有 100% 宽度的 block 元素。我还添加了文本左对齐(我只会为移动设备实现它，否则它会将您的导航堆叠在彼此之上，这在桌面上意义不大)。

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

请参阅所附图片以供引用。