只有縮小時，網頁才能在較小的屏幕上看起來完美

Question

我創建了一個模板，該模板具有更多“困難的”或有問題的CSS功能，例如具有溢出滾動的固定位置，全角導航欄，以及具有溢出滾動的另一個類似列的position：fixed元素。 我所有的字體大小都是在em中設置的。

該網站在大型台式機屏幕上看起來很理想，但在較小的屏幕上（即大多數筆記本電腦）看起來很理想。 但是，如果您在較小的屏幕（命令/控制減號）上縮小瀏覽器，它將再次看起來很理想，實際上等同於較大的屏幕。 第一次在較小的屏幕上加載站點時的問題實際上與在較大的屏幕上過度縮放（可能為250％）相同。

大多數問題似乎與寬度有關：固定位置導航欄上的文本鏈接無法按比例縮小，因此我出現了overflow-x：auto。 此外，還有一個居中的列，其中包含所有內容以在視覺上與背景圖像區分開，並且其內容因過度縮放而從過度縮放中脫離出來。

如何以100％的瀏覽器縮放級別正確縮放頁面？

我覺得答案是基本的CSS概念，我在自學中錯過了對它的理解，因此，如果看起來很明顯，我深表歉意。

謝謝。

Answer 1

這可能會有幫助。 將其放在文檔的開頭。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

編輯：

雖然這可能無法直接解決您的問題。 在使整個站點響應之前，使站點可用可能是短期修復。

它告訴瀏覽器從什么級別開始縮放以及其他內容。 您應該嘗試最適合您的設計的東西。

Answer 2

首先，我已經體會到您在做什么（ position:fixed div類的東西），因此很難為div或p對其進行自定義。

因此，您需要考慮一種解決方案，以使元素在屏幕上隱藏得太小。

例如檢測移動瀏覽器並隱藏它，等等。

如果您改用php ，這可能會更方便，因為您肯定可以找到檢測移動設備的模板。

檢查一下，看看是否適合您： 檢測移動瀏覽器

Answer 3

我遇到過類似的事情。 對我來說，這是因為我的網站正在通過http：//加載Google字體。 這在本地系統上運行良好，但是由於安全原因，Web服務器通過https托管，這意味着瀏覽器會阻止http：// google字體鏈接。 這導致該站點看起來更小或更大。

解決方案：將Google字體和其他相關網址更改為https：//。