針對不同設備的響應式網站視口問題

Question

我創建了響應式模板，並且遇到以下問題。

我在桌面上創建了一個小於480px的分辨率的媒體查詢，手機的分辨率小於540px。在桌面上它工作正常，在手機上按預期工作。

@media only screen and (max-device-width: 540px), 
screen and (max-width: 480px) { 

因此，無論何時我在平板電腦上打開網站，我都會加載桌面版本（如預期的那樣），但會放大結果。

如果我使用下面的代碼，最大規模爲0.6

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=0.6"> 

我得到正確的觀點平板電腦，但隨後在電話這是縮小了的。

我到處搜索並嘗試了各種組合以完成此項工作。從我所瞭解的我想要的最大規模= 1手機和0.6平板電腦。這怎麼能實現？

提前感謝您的時間。希望能夠做到。

編輯：刪除網址。

Answer 1

這是因爲最大比例設置爲0.6。這意味着該網站顯示爲60％。嘗試離開，或將其設置爲1.0