Question

我已经在我的网站上使用了响应式元标记，它主要用于：

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

在显示消息时，我似乎遇到了“消息”页面的问题。小消息似乎没有任何问题，而在计算机上，大消息也显示正常。虽然在我的手机上，大信息会在屏幕右侧偏离太远，因此您必须向右滚动才能阅读信息。

这是我的剧本：

<div class="media">
  <div class="media-left">
    <a href="#">
      <img src="assets/img/defaultuser.png" alt="user" width="64px" height="64px" hspace="10px" class="media-object" align="left">
    </a>
  </div>
  <div class="media-body">
    <div style="display:inline"><b><a href=""><? echo ''.$me_first_name.' '.$me_last_name.''; ?></a></b></div> <div align="right" style="float:right; display:inline"> <? echo $me_time; ?> </div><br>
    <? echo $me_message; ?>
  </div>
</div>

我尝试过使用width属性，但没有运气：

style="width:300px"

并尝试使用响应式引导程序属性：

<div class="col-xs-12 col-md-8">

但这仍然没有将文本保留在手机浏览器的固定块中。有没有办法可以限制手机浏览器的文字宽度而不影响它在PC浏览器上？

Answer 1

您是否尝试过使用自动功能 -

<style>
div {
    width: auto;
    height: 25px;
    position: relative;
    float: left;
}
</style>

只需将其添加到CSS代码中，它应根据显示器或设备的大小自动设置宽度。

控制响应式模板上文本宽度的限制

1 个答案: