用iframe扩展移动版html页面

Question

如何在移动设备上缩放网页以使其美观？

在页面上我有iframe。Iframe包含使用固定位置div的html5/javascript游戏。我也想扩大这个iframe。

非常感谢。

Answer 1

编辑：

我知道我很久以前就写过这篇文章，但这里是现代浏览器的最佳解决方案：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的好例子：http://css-tricks.com/css-media-queries/

原始帖子：

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

HTML：当设备的分辨率高于481px但低于1024px时，此示例将使用特定的CSS（在本例中为iPad_Portrait.CSS）。它适用于iOS设备，甚至适用于具有超高分辨率显示屏的iPhone 4和4S。但在安卓的高分辨率显示器上根本不起作用。

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

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