android - 如何在桌面上复制 <viewport> 缩放比例？

我有一些 HTML 页面通常提供给使用标签缩放内容(通常为 1280x720 的图像和视频)的移动设备(Android 平板电脑)。

理想情况下，我需要在桌面浏览器中查看相同的文件(或至少相同的内容!)，并让内容缩放以适应浏览器窗口。

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

因此，该内容将填满分辨率为 1080p 的 Android 电视盒的屏幕，因为其浏览器仍被归类为“移动”(并且 HTML 文件通过使用 WebView 的自定义应用程序显示)

最佳答案

考虑使用 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/

关于android - 如何在桌面上复制 <viewport> 缩放比例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26142975/