Wordpress：移动视图无法正常工作 |使网站移动友好答案

【问题标题】：Wordpress: Mobile view does not work properly | Make website mobile friendlyWordpress：移动视图无法正常工作 |使网站移动友好
【发布时间】：2015-02-23 21:55:06
【问题描述】：

我有一个在线商店，基于 wordpress，主题为“Mystile”。

我用自己的 HTML 和 CSS 代码创建了许多页面，它们在计算机上、在各种浏览器和显示尺寸下看起来都非常好。但是主题的自动移动视图显示所有自编码的东西非常糟糕。

例如：我想用一条简单的线条将主页上的一些图片分开放置。所以我使用了这样的 HTML 代码：

<div style="position: relative; bottom: 10px;">___________________________________________________________________________________________________________________</div>

线条的长度正好合适，分隔看起来不错。但是当然网站的移动视图的宽度比桌面视图的宽度要小得多，所以这个分隔线在智能手机上看起来很糟糕。

在其他主题的移动视图上，您肯定会注意到视图的定义宽度，因此我的分隔线仅显示它适合移动视图的长度。在我当前的主题中，情况并非如此，似乎移动视图只是整个网站的一种转换，而不是一个明确定义的显示内容的框。

我真的卡在这里，因为该网站已完成编码，它在计算机上看起来非常好，在任何显示尺寸等上。只有移动视图才是问题所在。

我能做什么和应该做什么？

【问题讨论】：

你应该使用<hr /> 而不是所有的下划线
这是一个充满下划线的 div 吗？尝试改用<hr/>。
@Zander，您不应该用新问题替换原来的问题。尽管它们解决了您的问题，但所有给出的答案现在都无关紧要了。我建议撤消您的编辑并在新主题中提出您的新问题。接受解决您的问题的答案也将帮助其他用户。
好的，我明白了，对不起。

标签： html css wordpress mobile woothemes

【解决方案1】：

您可以使用<hr/> 标签，而不是使用带下划线的 div。

在下面的示例中，您可以调整容器的大小，并且行将始终为 100% 宽度。你甚至可以使用 CSS 来设置线条的样式。

div {
  background: #F7F7F7;
  border: 1px solid black;
  padding: 24px;
  overflow: auto;
  resize: horizontal;
  width: 200px;
}
img {
  width: 100%;
  height: auto;
}

<div>
  <img src="http://lorempixel.com/200/200">
  <hr/>
  <img src="http://lorempixel.com/200/200">
</div>

【讨论】：