iOS 上的 Bootstrap 模态缩放问题答案

【问题标题】：Bootstrap Modal zoom issue on iOSiOS 上的 Bootstrap 模态缩放问题
【发布时间】：2016-06-17 17:25:25
【问题描述】：

该模式只是在 Iphone（所有浏览器）上放大，在 Android 和笔记本电脑（mac 和 pc）上运行良好

http://54.187.125.172/#/

这就是部署的链接。

CSS

body{
        padding-top:60px;
        min-height:100%;
        padding-right: 0px !important;
    }


.backgroundImg{
    width: 100%;
    height: 100%;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0; 
    background-image: url(../img/confetti.jpg) ;
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment: fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.modal-open {
  overflow-y: auto;
}

HTML

<div class="text-center">
    <button type="button" class="btn btn-info btn-lg center-block" data-toggle="modal" data-target="#myModalRegister" id="registerButton" href="#">Register</button>
    <button type="button" class="btn btn-info btn-lg center-block" data-toggle="modal" data-target="#myModalLogin" id="loginButton" href="#">Login</button>
</div>

【问题讨论】：

那是他的“反应能力”
我不明白你想说什么。
你的iphone窗口宽度是多少？
纵向宽度 320，横向宽度 480 我认为，这是来自谷歌搜索。我在不同的 iphone、iphone 6,6 plus、5,5s 上试过。同样的问题。
你的模态在pc或mac上的宽度是多少？？

标签： jquery ios css twitter-bootstrap

【解决方案1】：

您可以尝试禁用缩放替换元视口

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

【讨论】：

禁用缩放确实有效。问题已解决，但这是最好的方法吗？ .幸运的是我的应用不需要缩放，如果它的应用需要缩放怎么办？
你去掉 user-scalable=no，maximum-scale 将以 1:1 正常页面缩放加载页面

【解决方案2】：

试试 Cake-Modal https://jsfiddle.net/8u7fpz7L/122/

<section class="parent">
  <h1>Modal a Different Way <small>Using CSS and JS</small></h1>

  <div class="child">
    <button class="cakeModalJS">Click Me!</button>
    <p>I have same behaviour what you have using to Modal concept except common UI issues.</p>
  </div>

  <div class="cake-modal cake-hidden">
    <div class="modal-body">
      <button class="modal-close">x</button>
      <h3>
        Look I'm your inbuild Modal module 
      </h3>
    </div>
  </div>
  <footer>
    <p>Cake Modal by Color Cake. All Right Recieved &copy; 2018</p>
  </footer>
</section>
$('.cakeModalJS').click(function(){
    $('.cake-modal').removeClass('cake-hidden');
});

$('.cake-modal').on('click', function(e) {
  if (e.target !== this)
    return;

  $('.cake-modal').addClass('cake-hidden');
});

$('.modal-close').click(function(){
    $('.cake-modal').addClass('cake-hidden');
});

$color1: #5b5b5b;
$color2: #fff;

@mixin btn-gray {
  -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border: 1px solid $color1;
    cursor: pointer;
    background: $color2;
    &:hover{
     -moz-box-shadow:    inset  1px 0px 4px $color1;
     -webkit-box-shadow: inset  1px 0px 4px $color1;
     box-shadow:         inset  1px 0px 4px $color1;
     text-shadow: 0.01px 0.01px 0.01px rgba(91, 91, 88, 0.4);
    }
}


.cake-hidden{
  display: none;
}
.parent{
  position: relative;
  padding: 10px;
  height: 95vh;
  border: 2px solid $color1; 
  text-align: center;
  color: $color1;
  z-index: 1;
  h1{
    margin-top: 0;
    border-bottom: 1px solid;
    small{
      font-size: 40%;
    }
  }
}
.child{
  text-align: left;
  button{
    border: 1px solid $color1;
    padding: 10px;  
    cursor: pointer;
    @include btn-gray;
  }
  p{
    display: inline;
    color: $color1;
  }
}
.cake-modal{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(91, 91, 88, 0.2);
  z-index: 2;
  .modal-body{
    position: absolute;
    width: calc(100vw/2);
    height: calc(100vh/2);
    background: $color2;
    z-index: 3;
    -moz-box-shadow:    1px 0px 4px $color1;
    -webkit-box-shadow: 1px 0px 4px $color1;
    box-shadow:         1px 0px 4px $color1;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: left;
    padding:10px;
    h3{
      margin-top: 0;
    }
    .modal-close{
      float: right;
      padding: 8px 8px;
      line-height: 10px;
      font-weight: 600;
      @include btn-gray;
    }
  }
}
footer{
  position: absolute;
  color:$color2;
  background: $color1;
  padding: 10px;
  right: 0;
  left: 0;
  bottom: 0;
  p{
    font-size: 10px;
  }
}

【讨论】：