When designing a screen with dimensions of 3840 x 2160, the initial draft was created with 1920 x 1080. I utilized postcss-pxtorem with a "rootValue" set to 192 for responsive scaling. The zoom is normal and functional on screens below 1920 pixels wide. However, on Android phones with 3840 x 2160 resolution, the page becomes distorted and only half of the content is visible. Here is the code snippet:
// design 1920 * 1080
function setRem() {
// Determine ratio of actual device 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';
// Adjust font size if width is sufficient but height is not
if (realRatio > designRatio) {
document.documentElement.style.fontSize = (baseSize * scale) * (designRatio / realRatio) + 'px'
}
}
setRem();
window.addEventListener('resize', () => {
setRem();
});