html 等比缩放页面

根据浏览器窗口等比缩放页面

实现思路

通过css的transform scale属性对页面body元素进行缩放
缩放比例为实际窗口尺寸/设置的body像素尺寸，选择(窗口宽/body宽)和(窗口高/body高)中较小的一个
body缩放之后，位置相对于窗口出现偏移，许需要调整body的margin

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><title>等比缩放</title><style type="text/css">html {background: #757575}body {margin: 0;background: #a8a8a8;}</style>
</head>
<body id="body">
<div id="container"><div style="font-size: 40px">40px文字</div><div style="font-size: 20px">20px文字</div><div style="font-size: 20px">拖动浏览器窗口大小，查看缩放效果</div><button>按钮</button>
</div>
<script type="text/javascript">// body宽高let cw = 1920,ch = 1080let body = document.getElementById('body')body.style.width = `${cw}px`body.style.height = `${ch}px`// 对body进行缩放function windowResize() {// 窗口宽高let w = window.innerWidth, h = window.innerHeight// 缩放比例let r = w / cw < h / ch ? w / cw : h / chbody.style.transform = `scale( ${r})`// 因为scale是以body的原中心点为基准进行缩放，所以缩放之后需要调整外边距，使其位于窗口的中心位置body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'body.style.marginBottom = (-(h>ch?h:ch - r * ch)) + 'px'body.style.marginRight = (-(w>cw?w:cw - r * cw)) + 'px'}windowResize()// 监听窗口尺寸变化window.addEventListener('resize', windowResize);
</script>
</body>
</html>

html 等比缩放页面相关推荐

[html] 移动端如何禁止用户手动缩放页面？
[html] 移动端如何禁止用户手动缩放页面? <meta name="viewport" content="width=device-width,initial- ...
ios10中禁止Safari浏览器用户缩放页面
在ios10前我们能通过设置meta来禁止用户缩放页面: <meta content="width=device-width, initial-scale=1.0, maximum-s ...
js自动缩放页面自适应屏幕分辨率
js自动缩放页面自适应屏幕分辨率欢迎使用Markdown编辑器欢迎使用Markdown编辑器当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3 ...
js整体缩小网页_js实现整体缩放页面适配移动端
大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可切记: 1.该 JS 应在 head 中尽可能早的引入,减少重绘. ...
【问题解决】关于AltiumDesigner 10（AD10）原理图中拖动和缩放页面出现卡顿问题
问题: 在AD20中建立的原理图,后面用AD10打开,出现原理图中拖动和缩放页面卡顿问题. 原因: 在AD20中使用了一个文本框注释,可能AD10不兼容解决: 删除AD20中添加的文本框,重新在AD ...
PC及移动端禁止用户缩放页面的实现方式
对于移动端,我们可以直接这样限制: <meta name="viewport" content="width=device-width,initial-scale= ...
移动端禁止用户缩放页面大小尺寸
通常我们关闭移动端页面缩放是通过标签: <meta name="viewport" content="width=375,initial-scale=1,user- ...
JS自动缩放页面图片
注:该方法不适用于图片较多的页面! /*** 缩略图** @param bool isScaling 是否缩放* @param int width 宽度* @param int height 高度* ...
ios10中禁止用户缩放页面
ios10 通过js进行阻止用户缩放 window.οnlοad=function () { document.addEventListener('touchstart',function (even ...

html 等比缩放页面

根据浏览器窗口等比缩放页面

实现思路

代码实现

html 等比缩放页面相关推荐

最新文章

热门文章