如何让Google VR视图响应？

https://codepen.io/EightArmsHQ/pen/mwLyvy

我明明设置了CSS的宽度为100％，但它并没有裁剪的屏幕变得比视图小。

的JavaScript

$(window).on('load', function() { 
    $(".vrview").each(function(){ 
    var $this = $(this); 
    var id = $this.attr('id'); 
    var src = $this.attr('data-src'); 
    var vrView = new VRView.Player('#' + id, { 
     image: src, 
     is_stereo: false, 
     width: '100%', 
     height: '400px' 
    }); 
    }); 
});

CSS

.vrview{ 
    width:100%; 
    max-width:100%; 
}

似乎但是并没有做任何事情。

我不认为有喜欢setWidth(x)或set('width', x)任何setter方法，所以我不能做这样的事：

$(window).resize(function(){ 
    for(var v = 0; v < vrViews.length; v ++){ 
    var view = vrViews[v]; 
    view.set('width', 40); 
    } 
});

来源

2017-07-07 Djave

我相信，如果你省略在JavaScript的宽度和高度，你可以再大小iFrame（不是.vrview容器）通过CSS。

来源

2017-08-30 16:51:35 jshwlkr

我不认为是这样的话... https://codepen.io/EightArmsHQ/pen/ZJVxym?editors=0100 – Djave

字面上你必须直接调整iframe的大小。但是你已经手动管理比例。 https://codepen.io/jshwlkr/full/XaoyyL/ – jshwlkr

我实际上对embed responsively有一些喜悦。

我创建标准的代码，做一个iframe，然后复制的iframe嵌入到响应得到下面的代码：

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> 
<div class='embed-container'> 
    <iframe allowfullscreen='true' scrolling='no' src='https://storage.googleapis.com/vrview/2.0/index.html?image=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg&is_stereo=false&' style='border: 0px;'></iframe> 
</div>

结果： https://codepen.io/EightArmsHQ/pen/Bdvrrw

来源

2017-08-31 09:21:07 Djave

如何让Google VR视图响应？

回答

相关问题