Question

我正在开发一个测验应用程序，我正在尝试使其响应，以便它在所有设备上看起来都很好。该应用程序是一个html5应用程序，包含在iframe中并设置为填充整个iframe。应用程序的原生宽度为640px，高度为880px（这是我计算填充底部为137.5％的方式）。它在计算机和Android设备上运行良好，但在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>

这是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;
}

我已经（据我所知）包含了正确的元视口标记。为什么这在Android中运行良好但在iOS中失败？

Answer 1

我发现解决方案是将以下代码添加到页面上的canvas元素中 style =＆＃34; width：1px;最小宽度：100％＆＃34;

之前我已经在堆栈溢出上看到过这段代码，但是直到我将上面的css添加到画布中它才起作用。我希望这可以帮助有类似问题的人。布雷特

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

1 个答案: