ios响应设计不起作用（纵向太宽）_Ios_Iphone_Iframe_Responsive Design_Scaling

ios响应设计不起作用（纵向太宽）

ios iphone iframe responsive-design

ios响应设计不起作用（纵向太宽）,ios,iphone,iframe,responsive-design,scaling,Ios,Iphone,Iframe,Responsive Design,Scaling,我正在开发一个测验应用程序，我正在努力使它具有响应性，以便它在所有设备上看起来都很好。该应用程序是html5应用程序，包含在iframe中，并设置为填充整个iframe。应用程序的本机宽度为640px，高度为880px（我就是这样计算填充底部为137.5%）。它在计算机和安卓设备上运行良好，但在iOS设备上不起作用。我读到的一切似乎都表明我做得很正确，但在iphone上，应用程序太宽，无法在纵向模式下显示屏幕以下是html代码： <!DOCTYPE html> <html&g

我正在开发一个测验应用程序，我正在努力使它具有响应性，以便它在所有设备上看起来都很好。该应用程序是html5应用程序，包含在iframe中，并设置为填充整个iframe。应用程序的本机宽度为640px，高度为880px（我就是这样计算填充底部为137.5%）。它在计算机和安卓设备上运行良好，但在iOS设备上不起作用。我读到的一切似乎都表明我做得很正确，但在iphone上，应用程序太宽，无法在纵向模式下显示屏幕

以下是html代码：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iframeresponsive_mobile.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Student Quizzes</title>

</head>

<body>
<!--comment:  this next section makes a container div for the page with a max width (defined by css)-->
<div class="pagecontainer">

    <div class="intrinsic-container"><!--comment: iframe div begins-->
         <iframe src="scrolling/index.html">
  Your browser does not support inline frames or is currently configured not to display inline frames.
        </iframe>
    </div><!--comment: iframe div ends-->

    <div class="ad">    <!--comment: ad div starts-->
    This is an add div...
    </div><!--comment: ad div ends-->


</div><!--comment: pagecontainer div ends-->

</body>

</html>

据我所知，我已经包含了正确的元视口标记。为什么这在Android中工作得这么好，但在iOS中却失败了？

我发现解决方案是在页面的canvas元素中添加以下代码 style=“宽度：1px；最小宽度：100%”

我以前在stack overflow上看到过这段代码，但直到我将上面的css添加到画布中，它才起作用。我希望这能帮助有类似问题的人。

Brett

我发现解决方案是向页面上的canvas元素添加以下代码 style=“宽度：1px；最小宽度：100%”

我以前在stack overflow上看到过这段代码，但直到我将上面的css添加到画布中，它才起作用。我希望这能帮助有类似问题的人。

布雷特

有人对此有任何见解吗？有人对此有任何见解吗？有人对此有任何见解吗？

body {
margin-left: auto;
margin-right: auto;
background-color: black;
}

.intrinsic-container {
  position: relative;
  clear:both;
  height: 0;
  overflow: hidden;  
  /* to get padding-bottom divide the numbers of aspect ratio */
  padding-bottom: 137.5%;
  z-index: 3;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;


}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  border:0px;
  margin:0px;
}

.ad{
  background-color:lime;
  height:80px;
  width:100%

}

/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}