如何讓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視圖響應？

回答

相關問題