如何在一个页面中具有不同的视口宽度,可缩放元值?

时间:2014-03-05 06:32:09

标签: html5 iframe viewport meta

我想知道是否可以通过嵌入式iframe技术在一个页面中使用两个不同的视口元值?

的index.html

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
        <div>
                Content 1
        </div>
        <div style="width: 300px;">
                <iframe style="width: 300px; height: 100px; overflow: scroll;" src="iframe.html"></iframe>
        </div>
</body>
</html>

Iframe.html的

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=1000, initial-scale=0.5, user-scalable=yes">
</head>
<body>
        <div style="height: 100px; background-color: #0ff;">
                Content 2
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
</body>
</html>

我无法获得像iframe中的宽度或用户可伸缩工作的视口元值。 它被忽略了。 有解决方法吗?基本上我正在尝试实现,因此用户可以缩放iframe内容,而用户无法缩放外部区域。

0 个答案:

没有答案