通過CSS或Javascript設置兩個不同的視口設置

Question

我想爲不同的瀏覽器寬度設置兩個不同的視口設置。

第一視窗設定爲設備提供了廣泛比爲680像素寬度（尤其是對於iPad和桌面設備）：

的設備的第二個視下爲680像素寬度：

我試圖解決視口寬度CSS媒體查詢，以能夠要求當前的瀏覽器寬度：

@media only screen and (min-width: 681px) { 
@viewport { 
width: 1160px; 
} 
} 

@media only screen and (max-width: 680px) { 
@viewport { 
width: width=device-width; 
zoom: 1; 
} 
} 

但似乎我的視口被瀏覽器忽略。有人有一個想法，問題可能是什麼？

謝謝你們！

Answer 1

CSS Device Adaptation（@viewport at-rule）目前尚未得到很好的支持。特別是它在Safari桌面或移動設備上不受支持，並且僅在移動版Chrome 29以上版本中受支持。IE/Edge需要特殊的前綴。所以你不應該依賴它來滿足你目前的發展，因爲它可能在平臺上不一致。

參考：https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

Answer 2

什麼嘗試：

@media only screen and (min-width: 681px) { 
@viewport { 
    width: 1160px; 
} 
} 

@media only screen and (max-width: 680px) { 
@viewport { 
    /* That will set the element to 100% of the viewport's width */ 
    width: width: 100vw; 
    zoom: 1; 
} 
} 

你可以看到這樣一個問題：How to make the body width equal to the device-width automatically in CSS3 media query?

而這個CSS-技巧發佈：https://css-tricks.com/viewport-sized-typography/

希望它可以幫助