最近用笔记本做了一个网页,笔记本的系统缩放比是125%,浏览器是100%。
但是客户用的是台式机,客户的系统和浏览器的缩放比例都是100%,这个页面在100%会很丑,而且这个页面是为了全屏设计的,客户想不全屏的时候也能展示全所有信息。因此想尽可能少的改造代码就想到了zoom缩放。
zoom缩放的原理是:
1、先获取系统✖浏览器的缩放比例:
window.devicePixelRatio;//假设系统缩放是100%,浏览器是100%,这个值就是1✖1=1
2、调整缩放:
document.body.style.zoom = 目标缩放➗(系统缩放✖浏览器缩放)
例如我的页面是在125%(系统缩放✖浏览器缩放)下设计的
客户的系统缩放✖浏览器缩放是100%,那么在客户环境下document.body.style.zoom设置为1.25➗1,就可以实现客户的台式机环境下与我笔记本环境下画面比例相同。
设计思路:
我要实现的目标有两点:
一、是无论客户的系统或浏览器的缩放设置的是多少,页面都能通过zoom缩放成我设计的大小
二、非全屏下我想页面缩放