JavaScript - browser zoom detect

2017-04-25

Table of Contents

# JavaScript - browser zoom detect

強者我朋友身為一個設計師問我一個很奇耙的需求

就是可不可以知道瀏覽器的縮放狀態

因為她的 BOSS 要求縮放不破版, 所以她希望設計在縮放狀態時的 layout 讓工程師套版

於是來問我說是否有辦法知道瀏覽器的縮放狀態

先說一下其實要縮放不破版只要設計彈性的 layout 例如使用 grid 的設計基本上都不會破版, 以我的經驗縮放破版通常是一些特殊的 layout 或用一些奇特的 CSS 的寫法

但正妹設計師求助

魯蛇工程師只好默默的來看看有啥方法

在新的 JavaScript api 有個 devicePixelRatio 可以取得目前 device 的像素比

一般是用來判斷是否是 high resolution 的螢幕

但是當 browser 縮放時其實這個值也會改變(尚未在 mobile device 試驗

所以可以用這特性來做處理

但這有問題就是當本身螢幕就是 high resolution 得螢幕像是 2K or 4K or MBPR 的螢幕

它們的 window.devicePixelRatio 就不會是 1

所以縮放後也不好知道縮放的比例

所以非完美解…

且目前 browser 支援度不佳

下面是範例

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
console.log(browserZoomLevel);

目前看來與其去處理縮放不如把 layout 設計好才是正解