欢迎使用Markdown编辑器

当开发前端页面在分辨率1920的情况下，需要切换到小屏，有种方法是可以对屏幕比例进行缩放，通过css3属性transform可以自适应屏幕分辨率大小

var s;
function resize() {s = window.screen.width / 1920;document.body.style.transformOrigin = '0 0';document.body.style.transform = 'scale(' + s + ',' + s + ')';document.body.style.width = window.innerWidth / s + 'px';document.body.style.height = window.innerHeight / s + 'px';
}
window.onresize = function () {resize();
}
resize();

通过计算屏幕分辨率比例，对当前页面进行比例缩放。

但是这会有一个问题，就是如果页面中有定位，缩放后定位的位置会跑偏。那是因为，如果使用定位left，top来固定窗口位置时候，body的大小改变会对它的children的定位产生影响，并且定位的弹框大小没有对应缩放。

发现一个简单的方法

s = window.screen.width / 1920;
document.body.style.zoom = s;

这样就可以了

js自动缩放页面自适应屏幕分辨率相关推荐

js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...
JS自动缩放页面图片
注:该方法不适用于图片较多的页面! /*** 缩略图** @param bool isScaling 是否缩放* @param int width 宽度* @param int height 高度* ...
小记：让页面自适应屏幕分辨率
[code="java"] DIV+CSS实现两边固定宽度,中间自适应宽度-天魅设计博客 body{ margin:0; padding:10px; } #head{ margin ...
LabVIEW自适应屏幕分辨率缩放
文章目录前言一.子vi百度网盘自取二.子vi使用方法三.窗口大小设置四.总结前言在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上 ...
vue数据大屏自适应屏幕分辨率js
vue数据大屏自适应屏幕分辨率js 最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题,按照设计图的百分比写感觉太麻烦,宽高甚至字体大小都要用百分比,就在想有没有其他的方案能实现,相信都用过rem ...
js自动篡改页面url地址 - 场景篇
js自动篡改页面url地址 - 场景让用户感觉是多个专栏页面(更正规感) 主要代码: // 获取当前url var url = document.URL, //获取当前页面的网址信息URL;var ...
字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
Qt Creator软件界面配置——自适应屏幕分辨率
为了使Qt Creator软件自身界面自适应屏幕分辨率,需要对默认设置进行修改,否则不便于软件的使用. 修改内容如下图所示: 软件修改前后的对比如下两图所示:
js页面自适应屏幕大小_Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...

js自动缩放页面自适应屏幕分辨率

js自动缩放页面自适应屏幕分辨率

欢迎使用Markdown编辑器

js自动缩放页面自适应屏幕分辨率相关推荐

最新文章

热门文章