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

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>

我试过弄乱宽度属性但没有运气：

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 代码中，它就会根据显示器或设备的大小自动设置宽度。