Question

如何在移动设备上扩展网页？

在页面上我有iframe。 iframe包含使用固定位置div的html5 / javascript游戏。我也希望扩展那个iframe。

非常感谢。

Answer 1

编辑：

我知道我是在很久以前写过的，但这是现代浏览器的最佳解决方案：CSS媒体查询。

有点像下面的HTML选项，CSS Medial Queries是一种本机方法，可根据浏览器大小响应重排任何元素。

我通常基于标准的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具有超高分辨率显示器。但是对于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文件。

使用iframe移动缩放html页面

1 个答案: