使用CSS，標頭標籤或JavaScript強制縮放級別/ DPI比例

這裏有一個奇怪的問題。我們有一個網站，自從幾年以來一直很好。幾個月前，Firefox開始根據他操作系統上的用戶DPI設置來擴展頁面。使用CSS，標頭標籤或JavaScript強制縮放級別/ DPI比例

問題是，默認情況下，在Windows 7中DPI比例設置爲125％（在我們的國家），每個使用Firefox的訪問者都會看到頁面縮放。不過，Internet Explorer和Safari現在也在做同樣的事情，我猜Chrome會隨之而來。

棘手的部分是：當我打開頁面時，我看到了正確的佈局。如果我檢查瀏覽器的縮放級別，它會告訴我100％ - 當我用firefox或Internet Explorer打開同一頁面時，所有內容都會放大（放大）25％。如果我在瀏覽器設置中檢查縮放級別，則表示100％。如果我縮小兩次（達到80％），我會看到原始佈局。

有沒有簡單的方法來設置CSS，JavaScript或標題標籤的默認dpi縮放比例/縮放級別？

下面是一些截圖來解釋我的問題。

The "right" layout 這是過去幾年中使用的正確佈局。頁面居中，左側和右側是背景位

the "zoomed" in 在Firefox，IE和Safari上，同一臺計算機上的相同頁面看起來像這樣。它放大，你看不到背景，並且你看到的內容少一點。

所以，現在我的問題：我能做些什麼，使同一頁面在不同的計算機上以相同的方式進行縮放。我知道幾件事情總是不同，但規模應該是一樣的。

編輯：

總是使用transform：scale（.75）;轉換來源：100％; 0;並不總是合適的，因爲如果具有100％DPI設置的用戶訪問該頁面，則對他而言一切都會最小化。我不能總是縮放頁面。我需要以某種方式確定用戶是否已將其操作系統設置爲100％或125％DPI縮放比例。

編輯：

是有確定設置好的規模速度的選項。至少對於我的設置來說，現在就起作用了。我想補充兩個瀏覽器的截圖在同一臺機器（鉻頂部，底部的Firefox）看到差異（和嚴重需要得到固定由某人的問題）

device pixel ratio differnce from browser to browser on the same machine<code>enter code here</code>

來源

2014-11-25 Ello

Wel我猜你可以縮放身體使其始終適合'width：100vw'，然後使用'％'縮放元素以使瀏覽器始終與每個人看起來相同。但我想這是一個已編碼的網站很多工作。 – Persijn 2015-01-14 13:38:30

@Persijn是的，這是真的，這將是很多工作。當我們最終決定移民到一個新的商店系統並且把這個自制的惡魔放到它屬於的地方時，我讚美主，地獄最深的部分-_- – Ello 2015-01-14 13:48:33

http://stackoverflow.com/questions/995914/catch-browsers -zoom-event-in-javascript 對不起，不可能 – Persijn 2015-01-14 14:10:02

您可以用JavaScript檢查瀏覽器DPI級別，並與CSS相應放大網頁內容（如果需要）。

if(window.devicePixelRatio == 1) 
    $("body").addClass("zoom2x")

其中zoom2x是一個css類。

.zoom2x{ 
     zoom: 200%; /* all browsers */ 
    -moz-transform: scale(2); /* Firefox */ 
}

您可以交叉檢查當前的dpi設置here並驗證結果。

來源

2015-01-20 18:07:14 nalinc

謝謝你這個工作。我編輯了我的問題並添加了屏幕截圖 – Ello 2015-01-28 08:48:36

似乎沒有打開上是一個代碼修復，但它可以通過更改瀏覽器設置來解決。見下面的鏈接：

https://support.mozilla.org/en-US/questions/962979 Stop Firefox DPI Scaling (when Windows setting is at 125%)

來源

2015-01-20 11:48:31

謝謝你的回答，但我不能接受這個解決方案，因爲我需要一些在用戶計算機上工作的東西，而不是在我的。你不能指望用戶必須改變設置，因爲一些瀏覽器廠商通過非冗餘方式改變政治而變得瘋狂。如果每個瀏覽器都以同樣的方式處理這個問題，我可以適應它。此外，每個認真的瀏覽器都會在更改之前實施某種回退，一個標誌或其他內容。但Mozilla去的方式遠遠不公平。改變基本的縮放功能沒有解釋，並忽略用戶投訴hundrets – Ello 2015-01-20 13:03:29

使用CSS，標頭標籤或JavaScript強制縮放級別/ DPI比例

回答

相關問題