400%效果
50%效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-776066.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
overflow: hidden;
/* font-family: "Microsoft Yahei", Arial, sans-serif; */
}
#home {
position: fixed;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
</style>
<body>
<div id="app">
<div id="home">
<div style="font-size:28px;width:100%;height: 100px ;">小馬小馬</div>
</div>
</div>
<script>
function add() {
console.log("resize加載");
let width = 1920;
let height = 1080;
let dom = document.getElementById('home')
console.log(dom)
dom.style.width = `${width}px`;
dom.style.height = `${height}px`;
const currentWidth = document.body.clientWidth;
console.log(currentWidth, 'currentWidth')
const clientHeight = document.body.clientHeight;
console.log(clientHeight, 'clientHeight')
const widthScale = currentWidth / width;
const heightScale = clientHeight / height; //6.35
dom && (dom.style.transform = `scale(${widthScale},${heightScale})`);
}
window.addEventListener('load', add)
window.addEventListener("resize", add);
</script>
</body>
</html>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-776066.html
到了這里，關(guān)于html瀏覽器進(jìn)行縮放百分比 界面和文字保持不變的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
