通过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/

希望它可以帮助