Hi everyone!
I don't have this problem on Android devices, but only on iOS device (I tested with iPhone 6s)
If I open a pano image from landscape orientation, it remembers devices height in this orientation and doesnt change it(it stays the same) when I rotate it in portrait mode.
I don't have this problem with the demo examples.
Here is what I found after I tested:
1. When the page opens in a landscape orientation, it appears in a right way. If I turn the device over an opposite landscape orientation it appears in a right way as well. If I turn the device over a portrait orientation it gets broken.
2. If the page opens in a portrait orientation, it appears ok. When I turn it over a landscape orientation - it’s broken, BUT! when I turn it over an opposite landscape orientation - it appears OK. To a portrait orientation - it gets broken.
Summarizing that, I assume it is not able to handle orientation value properly or in a right moment (sometimes I can see a redrawing lag), maybe it needs for some delay after a device gets rotated.
Here is an example of the tours that doesn't work: http://app.locationviewing.com/properties/panoHTML/35
Here is my html code, I'm using the last version of krpano (1.19):
<!DOCTYPE html>
<html>
<head>
<title>Tour - {$name}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
{literal}
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
{/literal}
</style>
</head>
<body>
<script src="{$_public}krpano/krpano.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({
swf: "/web/krpano/krpano.swf",
xml:"{$_public}{$xml_path}",
target:"pano",
html5:"only",
mobilescale:1.0,
passQueryParameters:true
});
</script>
</div>
</body>
</html>
Alles anzeigen