我有一个 Bootstrap 模态，由于里面有很长的内容，所以它的高度很高，需要在移动设备中滚动它才能看到全部内容和底部的按钮。
它在正常屏幕缩放下工作正常。在 iphone safari 中，如果我稍微缩放屏幕，模式将不会滚动，并且整个屏幕似乎完全被阻塞，因此需要刷新页面才能在页面中执行更多操作。
我也检查了 Bootstrap 站点中的示例模态，它也有同样的问题。
我使用的模态代码是，
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div id="createAccount" class="modal fade in" role="dialog" novalidate="novalidate" style="display: block; padding-right: 17px;">
<div class="modal-dialog">
<div id="CreateAccLoader" style="display:none;"><img src="/scbt-static/assets/images/ajax-loader.gif"></div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
Create a new account
</h4>
<div id="errorMessage" style="display: none">
<p class="success-msg clearfix error-msg" style="display: none;">
<span class="glyphicon glyphicon-warning-sign pull-left"></span>
<span class="pull-left col-xs-11 padding-zero">
Email Id already exist, Please enter a valid new emaild
<a class="hide-message">Hide</a>
</span>
<span class="glyphicon glyphicon-remove pull-right hide-msg hide-message"></span>
</p>
</div>
</div>
<div class="modal-body">
<div class="clearfix">
<div class="col-sm-6">
<p>
*
Required fields
</p>
<form id="signInForm" method="post" class="form-horizontal" data-toggle="validator" role="form" novalidate="novalidate">
<h4>PERSONAL INFORMATION</h4>
<div class="two-col-error clearfix">
<div class="form-group col-sm-7 first-slot">
<div class="errorTxt">
<span id="signinErrNm1"></span>
</div>
<label class="control-label" for="firstname">First Name*</label> <input name="fname" type="text" class="form-control" id="firstname" data-error="#signinErrNm1" data-msg-required="Missing or empty value supplied for first name" required="" placeholder="First Name" maxlength="50" aria-required="true">
</div>
<div class="form-group col-sm-7 pull-right">
<div class="errorTxt">
<span id="signinErrNm2"></span>
</div>
<label class="control-label" for="lastname">Last Name*</label> <input name="lname" type="text" class="form-control" id="lastname" data-error="#signinErrNm2" data-msg-required="Missing or empty value supplied for last name" required="" placeholder="Last Name" maxlength="50" "="" aria-required="true">
</div>
</div>
<div class="form-group">
<div class="checkbox custom-checkbox">
<input id="receiveEmailScbt" type="checkbox" value="" class="checkTick" checked="checked"><label>Sign Up for Santa Cruz Biotechnology news and announcements</label>
</div>
<div class="checkbox custom-checkbox">
<input id="receiveEmailScah" type="checkbox" value="" class="checkTick" checked="checked"><label>Sign Up for Santa Cruz Animal Health news and announcements</label>
</div>
</div>
<h4>
LOGIN INFORMATION
</h4>
<div class="form-group col-sm-12 login-email-id">
<div class="help-block with-errors col-sm-12"></div>
<div class="errorTxt">
<span id="signinErrNm3"></span>
</div>
<div class="errorTxt">
<span id="signinErrNm4"></span>
</div>
<label for="email">Email*</label>
<input name="email" type="text" class="form-control" id="emailId" data-msg-required="Missing or empty value supplied for Email" data-msg-customemail="Invalid Email Address. Please check." required="" data-error="#signinErrNm3" maxlength="150" aria-required="true">
</div>
<div class="two-col-error clearfix">
<div class="form-group col-sm-7 first-slot">
<div class="errorTxt"><span id="signinErrNm12" class="password-error"></span></div>
<label class="control-label" for="password">Password*</label>
<input name="password" data-msg-required="Missing or empty value supplied for password" type="password" data-msg-onenumberpswd="Password should contain at least one numeric character" data-error="#signinErrNm12" data-rule-minlength="8" maxlength="100" data-msg-minlength="Password should be at least 8 characters in length" class="form-control" id="password">
</div>
<div class="form-group col-sm-7 pull-right">
<div class="errorTxt"><span id="signinErrNm13" class="password-error"></span></div>
<label class="control-label" for="confirmPassword">Confirm Password*</label>
<input name="confirmpassword" type="password" required="" class="form-control" data-error="#signinErrNm13" id="confirmPassword" data-msg-required="Missing or empty value supplied for password" data-msg-equalto="The password you entered in the Password and Confirm Password Field is not matching" aria-required="true">
</div>
</div>
<button type="submit" class="btn btn-default btn-primary full-width" id="createAcctBtn">
CREATE ACCOUNT
</button>
</form>
</div>
<div class="col-sm-6">
<div id="janrainMsgBox" class="errorTxt">
<span id="janrainSignErr"><label id="janrainErrMsg1" class="error" for="pwd" style="display: none;"></label></span>
</div>
<div class="social-media-signin">
<h4>
USE YOUR SOCIAL NETWORK
</h4>
<p>
Create an account quickly and easily with your preferred social network account. You wonât have to remember an extra name and password
</p>
<i class="janrain-login-btn fa fa-fw fa-facebook pull-left" id="facebook"></i> <i class="janrain-login-btn fa fa-fw fa-twitter pull-left" id="twitter"></i> <i class="janrain-login-btn fa fa-fw fa-pinterest pull-left" id="pinterest"></i> <i class="janrain-login-btn fa fa-instagram pull-left" id="instagram"></i>
</div>
<div class="create-account-desc">
<h4>
Why create an account?
</h4>
<p>
Creating an account with us makes your shopping experience much easier and faster. You can save favorites,save cart, check order status and speed through checkout with saved addresses,payment methods and more.
</p>
</div>
<div class="clearfix">
<div class="create-account-btn-wrap">
<span>Already have an account?</span>
<button type="submit" class="btn btn-default loginbtnSignupPage login-btn">
LOGIN NOW
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
使页面不可缩放，这将修复它:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
也试试:
body.modal-open {overflow: hidden;}
关于html - 如果屏幕缩放，则无法在 iphone Safari 中滚动 Bootstrap 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37862308/