Question

在一个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>
*, *:before, *:after { box-sizing: border-box; }

html,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,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>

我如何修改代码使其也可以在iPad chrome上使用？

0 个答案: