html - 当我无法使用 css 时，如何设置设备特定的视口(viewport)宽度？

Question

我在我的网站上使用 360 度产品旋转，我希望旋转为浏览器的 50%，然后在低于 1000 像素时旋转为 100%。但是我无法使用媒体查询，因为 HTMl 中使用了样式/规则。像这样；

<div id="Frame" style="width:100vw;  margin:auto; background-repeat:no-repeat; background-position:center;"></div>

<script type="text/javascript">                 
    $('#Frame').animate360({
         centerInWindow:false, 
         xmlPath: './360-light-1/', 
         objPath: './360-light-1/Images/',
         iconPath: './360-light-1/HTML5/Images/'
    });
</script> 

我试过在 css 中使用#Frame 标签，但没有成功。有什么办法可以在 html 中设置断点吗？

Answer 1

您可以使用@media 查询。

在页面底部包含以下脚本:

<script>

function initialiseFrame() {
var frame = document.getElementById('frame');
frame.removeAttribute('style');
}

window.addEventListener('load',initialiseFrame,false);

</script>

这将从 #frame 中删除内联样式，以便随后不会覆盖任何 @media query 样式。