Question

点击Make an Appointment按钮后，我的网站上有一个iframe。 iframe包含一个包含多个输入字段的联系表单。

一切正常，但由于某些原因在iOS（iPad和iPhone 5/6 - 我测试了Safari和Chrome）上，表单可以超出容器的宽度和高度。它应该只能在y轴上滚动;喜欢它在Android设备上。见下面的截图。

我查看了很多关于S / O的帖子，但还没有找到任何与iOS设备/浏览器的这种细微差别相关的问答。

以下是代码：

HTML：

<div id='button'><button id='contact'>MAKE AN APPOINTMENT</button></div>
    <div id="block"></div>
       <div id="iframecontainer">
           <a id='close' href='#'>X</a>
          <div id="loader"></div>
        <iframe></iframe>
    </div>

JQuery的：

$('document').ready(function() {
  $('#contact').click(function () {
    $('#block').fadeIn();
    $('#iframecontainer').fadeIn();
    $('#header-wrapper').css("visibility", "hidden");
     var width = $(window).width();
    $('#iframecontainer iframe').attr('src', 'http://a-link-to-my-iframe.html');
    if (width > 850) {
        $('#iframecontainer').css('width', '790px');
        $('#iframecontainer').css('margin-left', '-395px');
    }
    else {
        $('#iframecontainer').css('width', '310px');
        $('#iframecontainer').css('margin-left', '-155px');
    }
    $('#iframecontainer iframe').load(function() {
         $('#loader').fadeOut(function() {
            $('iframe').fadeIn();
         });
     });
   });

而且，CSS：

#contact {
  color: #c2c2c2;
  background: #151515;
  border: 1px solid #c2c2c2;
  padding: 13px 26px;
  text-decoration: underline;
  font-family: inherit;
  letter-spacing: 2px;
  font-size: 18px;
  margin: 0 auto;
}

#iframecontainer {
  width:75%; 
  height: auto; 
  display: none; 
  position: fixed;
  -webkit-overflow-scrolling:touch;
  overflow-y: auto;
  height:600px;
  top: 10%; 
  background:#FFF; 
  border: 1px solid #666;
  border: 1px solid #555;
  box-shadow: 2px 2px 40px #222;
  z-index: 999999;
  left: 50%;
  margin-left: -395px;
}
#iframecontainer iframe { 
  width: 100%; 
  height: 600px; 
  position: absolute; 
  border: none; 
}
#loader { 
  width: 250px; 
  height: 250px; 
  margin:auto;
}
#block {
  background: #000; 
  opacity:0.6;  
  position: fixed; 
  width: 100%; 
  height: 100%; 
  top:0; 
  left:0; 
  display:none;
}

以下是我所指的屏幕截图：

是否有特定的方法可以在iOS设备上禁用此功能？

Answer 1

尝试在iframe上添加scrolling="no"并更改一些iframe CSS，如

#iframecontainer iframe { 
  width: 1px;/* Make it a very small for your viewport */
  min-width:100%;/* Overwrite width. Let it decides the actual width of iframe */
  height: 600px; 
  position: absolute; 
  border: none; 
}

拖动时，iframe在iOS上移位

1 个答案: