为什么Marzipano没有在移动设备(浏览器)上显示图像

Question

我正在使用Marzipano在我的网站上显示特定地方的360级图像。它在台式机和笔记本电脑设备(浏览器(上运行良好，但在移动设备上则不然。以下是代码：

// Create viewer
var viewer = new Marzipano.Viewer(document.getElementById('pano'));
// Create a source
var source = Marzipano.ImageUrlSource.fromString("{{asset('images/panorama/'.$business->panorama) }}");
// Create geometry.
var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]);
// Create view.
var limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);
var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);
// Create scene.
var scene = viewer.createScene({
source: source,
geometry: geometry,
view: view,
pinFirstLevel: true
});
// Display scene.
scene.switchTo();

移动浏览器上有图像大小限制吗？或者你认为问题出在哪里？

谢谢！

Answer 1

检查器中画布的大小是否设置为0？如果是，您可能希望在一小段延迟后触发调整大小事件。因此，Marzipano将重新计算要展示的画布的大小。我也有同样的问题，这就解决了。我的猜测是，当初始化marzipano元素时，页面的布局还没有计算出来。

类似这样的东西：

scene.switchTo();
setTimeout(()=>{
window.dispatchEvent(new Event('resize'));
}, 60);

希望这能帮助到别人。