如何將視口縮小到最小寬度

Question

問題：我有一個看起來很糟糕的頁面，並且不會向用戶顯示足夠的相關信息。

嘗試的解決方案：

• （前320像素的屏幕）的初始比例設置爲1.5，但後來我需要設置相應的刻度320-480px之間的所有屏幕尺寸。
• （例如320px屏幕）將視口的寬度設置爲480px，但是這使得您需要滾動屏幕而不是像設置比例尺那樣縮小屏幕。

問題：看來我需要的是兩種解決方案的組合。一個將縮放我的視口，但直到它顯示在屏幕上的最小寬度，如480像素的內容。這可能沒有JavaScript或解決方案＃1我需要做什麼？

其他注意事項：解決方案需要對所有的瀏覽器/移動（IE11 +）

Answer 1

您嘗試使用媒體查詢工作？

例如：

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
} 

Answer 2

我不是100％肯定你正在嘗試做的，但如果我理解正確的話，你可以設置在CSS。將寬度設置爲100％將使其對您的視口窗口保持靈活&設置最小寬度將不會允許它獲得比此更小的寬度。

html,body { 
    width: 100%; 
    min-width: 480px; 
    height: auto; 
}