0

我开发了一个新网站，在主页中放置了一个 iframe，其中包含 p5js 中的交互式草图。在桌面和安卓上没有问题，但在 iPhone 上却有很多问题。首先是 iframe 无法识别我的交互。第二个是在 Safari 上它只显示 iframe 的一部分！

我尝试将 iframe 放入 div 并给出 div

overflow: inherit !important; 
-webkit-overflow-scrolling: touch;

并在 iframe 的 css 中

sandbox: allow-forms allow-same-origin allow-scripts;"

但它不起作用。

body {
  mix-blend-mode: difference;
}

#sequencing {
  width: 100vw;
  height: 100vh;
  border: 0px;
}

font {
  position: fixed;
  top: 1%;
  font-family: Arial;
  font-size: 14pt;
  font-weight: 100;
  z-index: 1;
  mix-blend-mode: difference;
}

a:link {
  color: gray;
  text-decoration: none;
  mix-blend-mode: difference
}

a:visited {
  color: gray;
  text-decoration: none;
  mix-blend-mode: difference
}

a:hover {
  color: gray;
  text-decoration: underline;
  mix-blend-mode: difference
}

a:active {
  color: gray;
  text-decoration: none;
  mix-blend-mode: difference
}

p1 {
  position: absolute;
  top: 20%;
  left: 20%;
  font-family: Arial;
  font-size: 50px;
  font-weight: 100;
  z-index: 1;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.7 maximum-scale=1 user-scalable=no">
  <title>studio.gianlucamarta</title>

  <link href="style.css" rel="stylesheet" type="text/css">
  <style>

  </style>
</head>

<body bgcolor="black">

  <iframe style="position: fixed; border: none; width: 100%; height: 100%; top: 0%; left: 0; overflow: inherit !important;  -webkit-overflow-scrolling: touch !important; " src="https://preview.p5js.org/001marta001/present/IkfFXnOSy"></iframe>

  <font style="left: 1%; font-weight:bold;"><a href="https://studio.gianlucamarta.net" target="_self">studio.<br>gianlucamarta</a></font>

  <font style="top: 94%; left: 1%; color: grey; font-weight:normal;">Project by<br><a href="https://gianlucamarta.net">gianlucamarta.net</a></font>

  <font style="right: 1%; text-align: right; color: grey; font-style: italic;font-weight:normal;">Independent Creative Technologist</font>
  <font style="top: 94%; right: 1%; text-align: right; color: grey; font-weight:normal;">Milano<br>2021</font>


</body>

</html>

4

0 回答 0