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

【问题标题】：ios responsive design not working (too wide in portrait orientation)ios 响应式设计不起作用（纵向太宽）
【发布时间】：2015-06-04 19:53:41
【问题描述】：

我正在开发一个测验应用程序，我正在尝试使其具有响应性，以便它在所有设备上看起来都不错。该应用程序是一个 html5 应用程序，包含在 iframe 中并设置为填充整个 iframe。应用程序的原生宽度为 640 像素，高度为 880 像素（这是我计算 padding-bottom 为 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 中却失败了？

【问题讨论】：

有人对此有任何见解吗？

标签： ios iphone iframe responsive-design scaling

【解决方案1】：

我发现解决方法是在页面的canvas元素中加入如下代码 style="width: 1px; min-width:100%"

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

【讨论】：