CSS響應式設計：奇怪的移動縮放問題

Question

我正在製作一個非常簡單的網站，它將實施兩種樣式表：一種針對桌面用戶，另一種針對移動用戶。

在使用移動樣式表時，我發現了無法解釋的狂野不一致。下面的圖片展示了這種情況。左邊是用Firefox的響應式設計模式查看的網站。右側是在Firefox的Android手機瀏覽器中查看的同一個網站。兩個視圖中的視口完全相同，我已檢查並檢查並進行三重檢查。瀏覽器自己的窗口的分辨率在兩個圖像中都是相同的。

正如你可以看到，移動瀏覽器不斷使用某種比例的，我找不到原因，一切獨立。頁腳右側面板上的圖標都是32像素的固定尺寸，但它們在視圖之間不同程度地縮放。樣式表對於兩個視圖都是相同的，並且所有字體都基於em單位，但即使它們彼此不成比例。

這裏發生了什麼？

Answer 1

你可能需要做的是改變你的網站頭部的視口。

例如<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">

當你把它像這樣它會變成了完全一樣的瀏覽器。當您將視口更改爲1時，它將放大（雙倍）。