縮放視口超過一個特定的值時的響應式佈局

Question

我正在使用的代碼下面有點響應式佈局：大型桌面

<meta name="viewport" content="initial-scale=1.0; width=device-width;">

設計師建立佈局（1370px寬） ，小桌面（990px​​）和平板電腦（620px）。假設移動（< 620px）將使用平板電腦版本，但將其縮放。

不過，我該怎麼做？由於視口的寬度設置爲device-width，因此會加載最小的樣式表，但不會對其進行縮放。

tl; dr - 有什麼辦法可以告訴手機瀏覽器無視width=device-width的價值，而是縮小網站以適應視口小於某個特定值的情況嗎？

非常感謝。

Answer 1

首先，這不是典型的響應式設計的最佳方法。如果您先構建移動設備並將寬度設置爲％，那麼它將避免您可能遇到的任何問題，因爲內容會縮放到設備寬度。

如果你真的想往下走其他路徑，雖然你可以使用JavaScript改變中繼檢視點元素，並使用enquire.js來決定時會發生....

enquire.register("screen and (max-width:619px)", { 

    match : function() { 
$('meta[name=viewport]').attr(
'content', 
'width=620; initial-scale=1.0' 
); 

},  

    unmatch : function() { 
$('meta[name=viewport]').attr(
'content', 
'width=device-width, initial-scale=1.0' 
); 
}, 
}); 

請注意，

1. 這沒有測試
2. 我的jQuery/JavaScript是可怕的，但應該給你足夠的繼續前進。