使用 iframe 为移动设备缩放 html 页面答案

【问题标题】：scaling html page with iframe for mobile使用 iframe 为移动设备缩放 html 页面
【发布时间】：2012-03-10 18:30:03
【问题描述】：

如何缩放网页以在移动设备上看起来不错？

在页面上我有 iframe。 iframe 包含使用固定位置 div 的 html5/javascript 游戏。我也想缩放那个 iframe。

非常感谢。

【问题讨论】：

以百分比指定 iframe 宽度以使其缩放。不过我不确定。
我认为这有特殊的元标记，但我在任何地方都找不到...

标签： html iframe mobile scaling smartphone

【解决方案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：当设备的分辨率高于 481 像素但低于 1024 像素时，此示例将使用特定的 CSS（本例中为 iPad_Portrait.css）。它适用于 iOS 设备，甚至适用于配备超高分辨率显示屏的 iPhone 4 和 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>

如果您将该代码放在脑海中，它将为每种设备类型选择适当的 css 文件。

【讨论】：