Fullscreen button not possible when viewing on mobile

[aetherplex]

First off, thanks Matthew for all the time and effort you put into this, it's incredible.

I'm having trouble when viewing my panorama in full-screen on mobile devices. I can only see the full-screen button when accessing the page from a desktop. I'm currently still in the early stages of learning html/css/js so excuse the mess if you're viewing it on a mobile device. The viewer also gets quite elongated (this is probably my lack of experience rather than an issue), but is there a simple solution to this?

I'm using Pannellum 2.3.0. Here is the page:

https://www.shadowvisuals.com/timberland_flooring.html

Thanks

[mpetroff]

The HTML5 full screen API is poorly support on mobile (e.g., not supported at all by iOS): http://caniuse.com/#feat=fullscreen

The viewer is elongated because you have a fixed height, which makes the viewer quite tall when the screen width becomes small. Since the "zoom" is specified as the horizontal field of view, the angular width of the view remains constant; since the aspect ratio changes, the angular height increases. Either you can decrease the horizontal field of view (the hfov parameter), or you can use CSS media queries to make the height smaller when the screen width is smaller.

[aetherplex]

Thanks for the swift reply, those solutions are perfect

[aetherplex]

One more question (not sure if I should open a new issue for this); the getPitch(), setPitch(), getYaw() and setYaw() methods don't seem to carry over to mobile (iOS), is this a known issue or is it something I'm doing wrong? You can see what I mean on the page I linked earlier. I have a function that sets the orientation of the new panorama based on the orientation of the previous panorama when a floor swatch is clicked.

[mpetroff]

I suspect it has something to do with your timeout that triggers setting the parameters once the scene has changed; it doesn't work for me on a desktop browser. The better way to do this would be to use a scenechange event listener, e.g.

function setOrientation(sceneName) {
    var yaw, pitch, hfov;
    yaw = viewer.getYaw();
    pitch = viewer.getPitch();
    hfov = viewer.getHfov();
    viewer.off('scenechange');  // Remove previous listener
    viewer.on('scenechange', function() {
        viewer.setYaw(yaw, 0);
        viewer.setPitch(pitch, 0);
        viewer.setHfov(hfov, 0);
    });
    viewer.loadScene(sceneName);
    currentScene = sceneName;
}

[aetherplex]

Sorry for the late reply, only just had a chance to try it. Worked like a charm. Thanks again for the help