使用iframe为移动设备扩展html页面

如何在移动设备上缩放网页以使其看起来更漂亮

在第页我有一个iframe。Iframe包含使用固定位置div的html5/javascript游戏。我还想扩展iframe

非常感谢。

编辑：

我知道这是我很久以前写的，但这里有一个适合现代浏览器的最佳解决方案：CSS媒体查询

有点像下面的HTML选项，CSS中间查询是一种本地方法，根据浏览器大小响应地回流任何元素

我通常基于标准的980px网站，并使用以下媒体查询对其进行调整：

@media (min-width: 1920px) {
// Your CSS here
}

@media (min-width: 1280px) {
    // Your CSS here
}

@media (min-width: 768px) {
    // Your CSS here
}

@media (min-width: 0px) {
    // Your CSS here
}

顺序很重要，因为浏览器将从最高的最小宽度级联到它需要的最小宽度

CSS-Tricks.com上的Chris Coyer提供了一些很好的例子：

原职：

您可以简单地使用条件CSS为每个屏幕大小提供特定的外观。有几种方法可以做到这一点：使用Javascript或HTML（速度更快）

HTML：当设备的分辨率高于481px但低于1024px时，本例将使用特定的CSS（本例中为iPad_ratio.CSS）。它适用于iOS设备，甚至适用于带有超高分辨率显示器的iPhone4和4S。但与android的高分辨率显示器完全不兼容

<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPad_Portrait.css" type="text/css">

JavaScript：这个例子涉及到浏览器检测，这并不总是可靠的，但我使用以下代码得到了相当好的结果：

 <script type="text/javascript">

$(document).ready(function()
{
    if((/iphone|ipod/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE IPHONE SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
            }
    else if ((/ipad/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE IPAD SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    }
    else if ((/android/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE ANDROID SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    }
    else if ((/blackberry/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE BLACKBERRY SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    }
    else
        // IF NO MOBILE BROWSER DETECTED, MOST LIKELY IS A COMPUTER, THEN IT DEFAULTS            TO THIS FILE.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    });
}

<script>

$（文档）.ready（函数（）
{
if（（/iphone | ipod/i.test（navigator.userAgent.toLowerCase（）））
{
//动态更改了IPHONE特定CSS的CSS文件。
$（“#您的_css_link_id”）.attr（'href'，'u您的_css_file.css的_名称'）；
}
else if（（/ipad/i.test（navigator.userAgent.toLowerCase（）））
{
//动态更改了IPAD特定CSS的CSS文件。
$（“#您的_css_link_id”）.attr（'href'，'u您的_css_file.css的_名称'）；
}
else if（（/android/i.test（navigator.userAgent.toLowerCase（）））
{
//动态更改了ANDROID特定CSS的CSS文件。
$（“#您的_css_link_id”）.attr（'href'，'u您的_css_file.css的_名称'）；
}
else if（（/blackberry/i.test（navigator.userAgent.toLowerCase（）））
{
//动态更改特定于BLACKBERRY的CSS的CSS文件。
$（“#您的_css_link_id”）.attr（'href'，'u您的_css_file.css的_名称'）；
}
其他的
//如果未检测到移动浏览器，很可能是计算机，则默认为此文件。
$（“#您的_css_link_id”）.attr（'href'，'u您的_css_file.css的_名称'）；
});
}

---

如果你把代码放在脑子里，它会为每种设备类型选择合适的css文件。

指定iframe宽度的百分比，以便进行缩放。我不确定。我想这有一个特别的元标签，但我在任何地方都找不到。。。