使博客文章对移动设备友好

Question

我的网站托管在 blogger.com 上，但我上传了一个完全自定义的主题，并调整了代码以稍微更改设计。该主题是移动友好的，除了我的实际博客文章文本在移动设备上仅显示页面的一半。就好像页面被切成两半，所以一半的句子没有显示。即使您尝试缩小。它只是在移动设备上显示桌面视图而不缩放，因此只有一半可见。其他一切都在移动网站上完美运行。我对如何解决这个问题感到迷茫...考虑在每个移动设备的头部添加元标记？我试图添加

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

但它没有用。基本上，我需要更改它，以便它自动扩展不同移动设备的博客文章。

已指定我的博客文章字体和页面宽度的 CSS

#test{
width: 680px; 
margin: 0 auto; 
text-align: left;
font-size: 15px; 
line-height: 24px; 
letter-spacing: -0.01em;
}

.HTML

<div id="test">BLOG TEXT</div>`

想知道是否有更简单的解决方案？

干杯

Answer 1

您可以尝试以下一件事：

#test {
width: 680px; /* your main container */
margin: 0 auto; /* centering it */
max-width: 100%; /* don't let the container be bigger than the body! */
/* ... the rest of your css... */
}

这样，如果视口小于 680px(大多数手机都是(，您的内容就不会溢出。如果这不起作用，您可以考虑在此处发布指向您的博客的链接，以便我们可以看到正在发生的事情的完整背景。