Question

我有一些HTML页面，通常用于移动设备（Android平板电脑），使用该标记来缩放内容（通常为1280x720图像和视频）。

理想情况下，我需要在桌面浏览器中查看相同的文件（或至少相同的内容！），并使内容比例适合浏览器窗口。

E.g。内容1280x720需要按比例放大以修复我的显示器上的Chrome全屏尺寸，1960x1080。

以下是在移动设备上显示内容的代码：

<html>
    <head>
        <meta name="viewport" content="initial-scale=1, width=1280, minimum-scale=1" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                margin: 0;
                padding: 0;
            }
            #master_container {
                height: 720px;
                overflow: hidden;
                position: relative;
                width: 1280px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="master_container"><!-- content is inserted here via jquery --></div>
        </div>
    </body>
</html>

因此，由于其浏览器仍被归类为“移动”（并且使用WebView通过自定义应用程序显示HTML文件），此内容将填充分辨率为1080p的Android电视盒上的屏幕< / p>

Answer 1

考虑使用CSS媒体查询。

使用CSS媒体查询，您将能够呈现为特定范围的输出设备量身定制的内容，而无需更改内容本身。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

这是一个来自网络的快速示例（只需重新调整浏览器窗口大小）： http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/

Answer 2

我刚刚为此构建了a library。

此库使用CSS zoom和transform属性来复制IE11的视口缩放实现。

以下是如何使用它：

<!-- CSS Device Adaptation -->
<style>
  @-ms-viewport { width: 1280px; height: 720px; }
</style>

<!-- Polyfill -->
<script src="fixedviewport.js"></script>
<script>
  FixedViewport.polyfill(1280, 720).onDOMContentLoaded();
</script>

@-ms-viewport是以浏览器本机方式完成此工作，不幸的是，只有Internet Explorer 10+和基于Presto的旧Opera浏览器才支持此功能。

幸运的是，FixedViewport.polyfill(1280, 720).onDOMContentLoaded();将为您填充他们的行为。你应该同时拥有原生CSS和这个polyfill到你的页面在所有浏览器上工作。

Answer 3

   @media screen and (max-width: 1200px) {
        .someClass {
        width: 100%;
        color: red;
        }
    }

这只是媒体查询的一个简单示例。

如何在桌面上复制<viewport>缩放？</viewport>

3 个答案: