ios響應式設計無法正常工作（縱向方向太寬）

我正在測驗應用程序中工作，我試圖使其響應以便在所有設備上看起來都很好。該應用程序是一個html5應用程序，幷包含在iframe中，並設置爲填充整個iframe。應用程序的本地寬度是640px，高度是880px（這是我如何計算填充底部爲137.5％）。它適用於電腦和Android設備，但不適用於iOS設備。我正在閱讀的所有內容似乎都表明我已經做得正確，但是在iphone上，應用程序對於縱向模式的屏幕太寬。ios響應式設計無法正常工作（縱向方向太寬）

下面是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中失敗？

來源

2015-06-04 brett

有沒有人有這方面的見解？ – brett

我發現，解決方案是將以下代碼添加到畫布元件在網頁風格=「寬度：1px的;最小寬度：100％」

我看到的堆棧溢出此代碼之前但直到我將上面的CSS添加到畫布上時才起作用。我希望這可以幫助有類似問題的人。 Brett

來源

2015-10-16 18:18:03 brett

ios響應式設計無法正常工作（縱向方向太寬）

回答

相關問題