10005
herokuでデプロイ後にiphone5sのsafariで確認したところ  
レスポンシブデザインのxsにならず、smのデザインになってしまいます。

```

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

PCのsafariでブラウザサイズを可変した場合は正しく動いています。  
どうしたら正しくxsで表示させることができるでしょうか

application.css

```

     *= require_tree .
     *= require 'vendor/bootstrap.min'
     *= require 'flat-ui'
     *= require 'bootstrap-social'
     *= require 'bootstrap-datetimepicker'
     *= require 'masonry/basic'
     *= require 'masonry/centered'
     *= require 'masonry/fluid'
     *= require 'masonry/gutters'
     *= require 'masonry/infinitescroll'
     *= require 'masonry/right-to-left'
     *= require 'masonry/transitions'
    
     *= require_self
     */
    
    
    
     body { padding-top: 70px; }
          footer { margin-top: 100px; }
          table, td, th { vertical-align: middle; border: none; }
          th { border-bottom: 1px solid #DDD; }
    
    
    
     .carousel-control.left, .carousel-control.right {
          background-image: none
     }
    
    
    
     /*
     Masonry
     */
     .wrapper {
          width: 95%;
          margin: 3em auto;
     }
    
     .masonry {
          margin: 1.5em 0;
          padding: 0;
          -moz-column-gap: 1.5em;
          -webkit-column-gap: 1.5em;
          column-gap: 1.5em;
    
     }
    
     .item {
          display: inline-block;
          background: #fff;
    
          margin: 0 0 1.5em; /*0 0 1.5em*/
          border-radius: 4px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-shadow: 4px 4px 4px 0 #8b8b8b;
      }
    
     .menu {
    
          margin: 0 0 1.5em; /*0 0 1.5em*/
     }
    
     .text {
          display: inline-block;
          background: #fbfcfb;
          padding: 7px;  /*1em;*/
          margin: 0 0 1.5em; /*0 0 1.5em*/
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-shadow: 4px 4px 4px 0 #8b8b8b;
          border-radius: 4px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
     }
    
    
    
     /*==========  Mobile First Method  ==========*/
    
     /* Custom, iPhone Retina */
     @media only screen and (min-width : 320px) {
         .masonry {
             -moz-column-count: 2;
             -webkit-column-count: 2;
             column-count: 2;
         }
     }
    
     /* Extra Small Devices, Phones */
     @media only screen and (min-width : 480px) {
         .masonry {
             -moz-column-count: 2;
             -webkit-column-count: 2;
             column-count: 2;
         }
     }
    
     /* Small Devices, Tablets */
     @media only screen and (min-width : 768px) {
         .masonry {
             -moz-column-count: 3;
             -webkit-column-count: 3;
             column-count: 3;
         }
     }
    
     /* Medium Devices, Desktops */
     @media only screen and (min-width : 992px) {
         .masonry {
             -moz-column-count: 4;
             -webkit-column-count: 4;
             column-count: 4;
         }
     }
    
     /* Large Devices, Wide Screens */
     @media only screen and (min-width : 1200px) {
         .masonry {
             -moz-column-count: 4;
             -webkit-column-count: 4;
             column-count: 4;
         }
     }
    
    
    
    
     img{
         max-width: 100%;
         height: auto;
         width /***/:auto;
         border-radius: 4px;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
     }
    
     body {
         background-color: #fbfcfb;
     }
    
```
CC BY-SA 3.0
2015-05-09T07:55:04.067
9983
2015-05-10T08:40:58.927
2015-05-09T11:55:14.763
9161
9161
question
ruby-on-rails bootstrap
Rails4 iphone5s上でBootstrap3のデザインがブラウザと異なる
headに下記を追加

```

    <!--幅はデバイスに合わせる。縮小拡大はしないようにする-->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    
```
CC BY-SA 3.0
2015-05-10T08:40:58.927
10005
2015-05-10T08:40:58.927
9161
9983
answer