使博客文章移动友好答案

【问题标题】：Making blog posts mobile friendly使博客文章移动友好
【发布时间】：2018-11-20 08:26:54
【问题描述】：

我的网站托管在 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>`

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

干杯，

【问题讨论】：

没有您的代码，很难找到问题所在。你在使用媒体查询吗？
您应该提供您的HTML,CSS。
你能提供你博客的网址吗？
@AAShakil 博客文章的 CSS 和 HTML 已添加到我的问题中。这有帮助吗？
@Vishnuprasad 我将我的博客文章 HTML CSS 添加到我的问题中。这是否有助于找出问题所在？

标签： html css blogger head

【解决方案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... */
}

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

【讨论】：