为移动设备定制

【问题标题】：Customize for mobile devices为移动设备定制
【发布时间】：2017-05-11 18:43:52
【问题描述】：

我有一个网站 (http://studenter.miun.se/~liha1507/dt100g/data/)，我想为移动设备定制它，但当您在智能手机上查看该页面时，您仍然可以横向移动该网站。谁知道如何解决这个问题？

【问题讨论】：

【解决方案1】：

您的列上有一些硬编码的宽度样式（在 HTML 中内嵌）。

从这里更改两个您的列：

<div class="col-md-6" style="width:815px;">

到这里：

<div class="col-md-6">

【讨论】：

【解决方案2】：

很好地使用引导程序并将内联样式删除到 css

在你的 html 上

<div id="my-div-1" class="col-md-6"></div>
<div id="my-div-2" class="col-md-6"></div>

CSS 在该断点处使用 auto

  #my-div-1 {
    width: 815px;
  }
  #my-div-1 {
    width: 335px;
  }

  @media (max-width: 992px) /* Check what the width is for the breakpoint */
     #my-div-1,  #my-div-2 {
         width: auto;     
     }
  }

【讨论】：