iOS上的IFrame高度问题（手机游戏）

本文介绍了iOS上的IFrame高度问题（手机游戏）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

示例页面来源：

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =UTF-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no> 
< title> Page< / title> 
< / head> 
< body> 
< div class =mainstyle =height：100％;> 
< div class =headerstyle =height：100px; background-color：green;>< / div> 
 
< iframe src =http://www.wikipedia.com
 style =height：200px; width：100％; border：none;>< /的iframe> 
 
< div class =footerstyle =height：100px; background-color：green;>< / div> 
< / div> 
< / body> 
< / html>

问题是， height 的 200px 在移动版Safari中被忽略：

此外，我想通过vanilla JavaScript动态更改IFrame的高度，这完全不适用于以下代码：

  document.getElementsByTagName（'iframe'）[0] .style.height =100px

height 样式的值根据dev工具正确更改，但它被忽略，因为IFrame的实际渲染高度没有t更改。

这似乎只是移动版Safari中的一个问题，并且在最新版本的桌面Safari，Firefox，Chrome，Androids WebView等上正常工作。 / p>

测试页：

Ps。：我在browserstack上使用各种设备对此进行了测试，并且还在那里截取了屏幕截图，因为我手头没有实际的iDevice。

解决方案

它看起来像这样：

iFrames仅在iOS上出现问题，所以你必须调整你的iframe。

你可以把一个div包装在iframe上，在iframe上设置css，对我有用的是添加：put属性scrolling ='no'。

祝你好运。

Example page source:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:

Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:

document.getElementsByTagName('iframe')[0].style.height = "100px"

The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.

This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.

Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.

解决方案

It looks like this: How to get an IFrame to be responsive in iOS Safari?

iFrames have an issue on iOS only, so you have to adapt your iframe to it.

You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.

Wishing you luck.

这篇关于iOS上的IFrame高度问题（手机游戏）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..