CSS: полноэкранный режим в Chrome-Android не учитывает мета области просмотра - PullRequest
Новая
       34

CSS: полноэкранный режим в Chrome-Android не учитывает мета области просмотра

0 голосов
/ 21 октября 2018

Я разрабатываю одностраничное веб-приложение (SPA)

В своем заголовке я использую следующую метапортовую область: 

<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 этот рендер с той же пропорцией, что и на рабочем столе, см. Скриншот ниже:

enter image description here

Но когда я переключаюсь в полноэкранный режим, используя: 

document.body.webkitRequestFullscreen();

, я теряю пропорции, которые у меня были, и мое измерение px кажется больше.enter image description here

Тестирующим устройством является Nexus 5, который имеет DPR 2 или 3 (я не уверен), и я знаю, что это связано сизменение масштаба моего измерения px.

Я бы хотел, чтобы полноэкранный режим отображался как не полноэкранный режим.Это упрощенный пример проблемы, которая появляется в полностью разработанном приложении, в котором широко используется px, поэтому я хотел бы, если возможно, не менять весь мой CSS для замены px на% или что-то в этом роде.

...