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

Question

我已经在我的网站上使用了响应式元标记，它在大多数情况下都有效：

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

我的 "messages" 页面在显示消息时似乎遇到了问题。小消息似乎没有问题，在计算机上，大消息也显示正常。尽管在我的 phone 上，大消息会在屏幕右侧显示得太远，因此您必须向右滚动页面才能阅读消息。

这是我的脚本：

<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"

并尝试使用响应式 bootstrap 属性：

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

但这仍然不能将文本保留在移动 phone 浏览器的固定块中。有没有一种方法可以限制移动 phone 浏览器上的文本宽度而不影响 PC 浏览器上的文本宽度？

Answer 1

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

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

只需将此添加到您的 CSS 代码中，它就会根据显示器或设备的尺寸自动设置宽度。

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

Control restriction of text width on responsive template

html

css

mobile

width

responsive-design