Question

我正在开发Web单页应用程序（SPA）

在标题中，我使用以下视口meta：

<meta name="viewport" content="width=1200, user-scalable=no">

我之所以使用它，是因为它是用于风景应用程序，而不是响应式的，它在移动设备上的呈现方式应与在桌面上大致相同。 1200px是PSD的尺寸。

这是我的问题的简化示例。

HTML

<body>
    <div class='test'></div>
</body>

CSS

html, body{
    width:100%; height:100%;
}
.test{
    position:absolute;
    right:202px; top:39px;
    width:82px; height:99px;
    background-image:url('/assets/images/bg/bg2-moon.png'); 
    background-color:red;
}

在chrome / android上，此渲染比例与在桌面上相同，请参见下面的屏幕截图：

但是当我切换到全屏模式时，请使用：

document.body.webkitRequestFullscreen();

我放开了我拥有的比例，我的px尺寸看起来更大了。

测试设备是Nexus 5，其DPR为2或3（我不确定），我知道这与重新调整px尺寸有关。

我希望全屏模式呈现为非全屏模式。这是一个问题的简化示例，出现在一个完全开发的应用程序中，该应用程序广泛使用px，因此，我希望尽可能不更改所有CSS，以用％或类似的方式替换px。

CSS：chrome-android中的全屏不尊重视口元

0 个答案: