Question

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)这样的定制者，所以我不能这样做：

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

Answer 1

我相信如果省略JavaScript中的宽度和高度，则可以通过CSS调整iFrame（而不是.vrview容器）的大小。

Answer 2

我实际上对embed responsively感到高兴。

我创建了标准代码，制作了iframe，然后将iframe复制到embed中，以获取以下代码：

<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

如何让Google VR View响应？

2 个答案: