在一个400像素宽的容器中嵌入了一个iframe，并且在iframe内容中有一个文本区域，该文本区域有时具有更宽的宽度（有时意味着在原始源中它通过javascript应用了宽度，因此在这里我通过样式宽度），然后选择容器。当文本区域过宽时，会将最大宽度100％应用于文本区域，以使其适合iframe。 它在台式机Chrome上运行良好，但在iPad Chrome上无法运行。在Ipad上，iframe始终与textarea宽度一样宽。
（我想知道如何使用JS来解决此问题，因为html / css可以解决此问题，并使其在iPad上运行，因为桌面浏览器可以很好地解决此问题。）
非常感谢您的帮助！
以下是示例屏幕截图：
这是源代码： 索引html
<!DOCTYPE html>
<html>
<head>
<title>iPad iFrame test - index</title>
<style>
*,*:before,*:after { box-sizing: border-box; }
html,body {
width: 100%;
height: 100%;
}
body {
font-family: Arial;
font-size: 12px;
background: #f6f7f8;
margin: 0;
padding: 20px;
}
.container {
position: relative;
width: 400px;
height: 300px;
background: white;
border: 1px solid #bbb;
}
.iframeContainer {
width: 100%;
height: 100%;
padding: 20px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="iframeContainer">
<iframe src="if.html" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
iframe html：
<!DOCTYPE html>
<html>
<head>
<title>iPad iFrame test - iframe</title>
<style>
*,body {
width: 100%;
height: 100%;
}
body {
font-family: Arial;
font-size: 12px;
background: #f5f6f7;
margin: 0;
}
.textareaContainer {
width: 100%;
height: 100%;
padding: 10px;
border: 1px solid #bbb;
}
textarea {
outline: 0;
padding: 5px;
border: 1px solid #d8dbdd;
box-shadow: inset 0 1px 2px rgba(0,0.2);
max-width: 100%; /* This works fine on Desktop,but fails on iPad */
}
</style>
</head>
<body>
<div class="textareaContainer">
<textarea style="width: 700px; height: 100px;"></textarea>
</div>
</body>
</html>