post css -pxtorem большой экран отображается только наполовину - PullRequest
0 голосов
/ 17 марта 2020
* Требуется экран

3840 * 2160, проектный проект - 1920 * 1080, я использовал post css -pxtorem, "rootValue": 192, это нормально и реагирует на масштабирование ниже экрана 1920. Но в 3840 x 2160 Android телефон, страница искажена, и может отображаться только половина содержимого. Код выглядит следующим образом:

// design 1920 * 1080
function setRem() {
// Ratio of actual device page width to design draft
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight;
const designRatio = 1920 / 1080;
const realRatio = htmlWidth / htmlHeight;

let baseSize = 192;
let scale = htmlWidth / 1920;
document.documentElement.style.fontSize = (baseSize * scale) + 'px';

// There is a situation where the width is enough and the height is not enough
if (realRatio > designRatio) {
  document.documentElement.style.fontSize = (baseSize * scale) * (designRatio / realRatio) + 'px'
}
}

setRem();

window.addEventListener('resize', () => {
setRem();
});

1 Ответ

0 голосов
/ 18 марта 2020

Это было решено, не rem, но система Android 5.0 не может использовать дисплей: flex;

...