停止元視口響應

Question

Demo

我想在此網站上做出響應行爲。 有meta viewport內容設置爲width=device-width, initial-scale=1, maximum-scale=1，但如果我通過減小其寬度（大約200px寬度和更小）來調整瀏覽器視口大小，則內容按比例縮放並響應性「切換」。

您可以比較本網站和jsFiddle演示與下面的圖片。具有相同字體大小的相同文本，但縮放比例不同。

UPD

我需要知道如何設置20px的字體大小，它會按比例縮放就像沒有使用meta viewport。試着做一個<h1>meta viewport和沒有一個，你會明白我的意思

Answer 1

該解決方案很簡單。我只需要設置身體min-width

Answer 2

你的問題還不清楚，寬度：

理解meta viewport的功能很重要。

視口是用戶的網頁可見區域。

視口因設備而異，在手機上比在電腦屏幕上小。

- Source

此功能可以防止用戶放大或縮小在您的網站。你給我們的代碼說，你的網頁的寬度必須是父視口的寬度（等於你的瀏覽器的可視區域），初始縮放必須是1（這意味着不設置初始縮放），最大規模可以是1（這意味着不允許放大）。

事實上，您的網站是響應，直到一定的最小寬度沒有任何直接鏈接到meta viewport。

網站的響應速度取決於CSS中所謂的breakpoints。這給出了基於視口屬性的某些CSS規則（在響應情況下：如果屏幕寬度在某個最小量px和最大量之間）。據我可以理解，你的實際需要來設置CSS屬性min-width到您的網站的身體是這樣的：

body { 
    min-width: 300px; /*You'll have to set the value you wish here*/ 
} 

你所要做的下一件事就是選擇你將如何處理比300px較小的屏幕。有在此之後兩個選項：

• 您可以選擇強制給你的網頁設備的寬度和預防水平滾動，但這將隱藏所有的溢出。我個人建議不要使用這種技術。爲此，您需要隱藏所有html的CSS溢出：html {max-width: 100vw; overflow-X: hidden;}。

• 其他（更好）選項是給你的網頁最小所需的寬度。這將允許水平滾動和更好的用戶體驗。爲此，請使用此CSS代碼：html {min-width: 300px; overflow-X: visible;}（請記住用您想要的最小寬度替換300px）。

這應該是所有現在。請記住，有數百個可用的響應式網頁設計指南。希望你的問題得到解決。