Sie sind nicht angemeldet.

Fix: Safari on iPhone in landscape, more than one tab open hides the lower part of virtual tours

HansvonWeissenfluh

Anfänger

  • »HansvonWeissenfluh« ist der Autor dieses Themas

Beiträge: 10

Wohnort: Genoa, Italy

Beruf: Photographer, web designer, graphic designer

  • Nachricht senden

1

Dienstag, 2. April 2019, 20:04

Fix: Safari on iPhone in landscape, more than one tab open hides the lower part of virtual tours

Hi all,

Having more than one tab opened in Safari, putting an iPhone (mine is a 6S Plus) in landscape mode prevents KRPano from hiding Safari bars and hides the lower part of the window, cutting buttons at the bottom out of the screen.

I tried to use window.innerHeight in order to get the correct available height. Here is a javascript that worked for me:

[code]
var iheight = window.innerHeight;

function resize() {
if(window.innerHeight != iheight) {
iheight = window.innerHeight;
document.body.style.height = iheight + 'px';
}
};

setInterval(function(){
resize();
}, 500);
[/code]

Surely it can be written better and optimized, but it seems that it fixes the problem. I put it in the html page that embeds the KRPano viewer.

Best regards,
Hans

rebaj83

Fortgeschrittener

Beiträge: 254

  • Nachricht senden

2

Mittwoch, 3. April 2019, 14:57

Hi

thanks for sharing,

Just tried this in my html with no effect... safari bars are stil visible, and tour bottom overflowed

thanks

HansvonWeissenfluh

Anfänger

  • »HansvonWeissenfluh« ist der Autor dieses Themas

Beiträge: 10

Wohnort: Genoa, Italy

Beruf: Photographer, web designer, graphic designer

  • Nachricht senden

3

Mittwoch, 3. April 2019, 22:44

Thanks for trying.
Yes, the bars at the top don't disappear, I forgot to tell that. But on my iPhone at least it fixes the problem with the bottom. What iPhone and what KRPano version did you use? How did you implement the code? Have you a page link to look at?
Please let me know.
Best,
Hans

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

5

Mittwoch, 3. April 2019, 23:32

this solution is actually not that bad...
makes sense for fullscreen apps only,
but i did a test and it does help to prevent gui problems on ios

what do you guys think of it?

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12

var iHeight = window.innerHeight;
function resize() {
	if(window.innerHeight != iHeight) {
		iHeight = window.innerHeight;
		document.body.style.height = iHeight + 'px';
	}
}
var timeOut = null;
window.onresize = function() {
	if(timeOut) clearTimeout(timeOut);
	timeOut = setTimeout(resize, 100);
}
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von »indexofrefraction« (4. April 2019, 07:40)

HansvonWeissenfluh

Anfänger

  • »HansvonWeissenfluh« ist der Autor dieses Themas

Beiträge: 10

Wohnort: Genoa, Italy

Beruf: Photographer, web designer, graphic designer

  • Nachricht senden

6

Donnerstag, 4. April 2019, 12:16

Hi,
I'm glad to have the confirmation that the raw code I initially posted is working even for others. Thanks for having refined it. Yes, the onresize event and triggering it from KRPano xml only for iPhone were something I would have liked to add when I could find the time.
Thanks for your time, indexofrefraction!
If nothing better can be found at the moment, it would be nice to have something based on innerHeight detection already embedded in the next KRPano player release.
Klaus?

Best,
Hans

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

7

Donnerstag, 4. April 2019, 14:54

not sure it would make sense to be included in krpano
you can also have multiple inline panoramas for example, there this code probably wouldn't be good.

this is really only for fullscreen applications,
and i'm not even sure if it could cause other troubles.

it would be good to hear some opinions from others!

anyway, i test-wise added this for my tours...
(for iOS and Android devices)
(in my index.html)
zFilter plugin -- zFlare plugin -- zSnapshot plugin

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

8

Donnerstag, 4. April 2019, 17:22

Hi,

the next krpano release will handle that case automatically.

Here a quick sneak preview:

krpano 1.20 iPhone Fullscreen Mode:

Best regards,
Klaus

HansvonWeissenfluh

Anfänger

  • »HansvonWeissenfluh« ist der Autor dieses Themas

Beiträge: 10

Wohnort: Genoa, Italy

Beruf: Photographer, web designer, graphic designer

  • Nachricht senden

9

Donnerstag, 4. April 2019, 22:07

Great Klaus!
Many thanks for such a preview! It looks awesome!

Wouldn't it be possible to show the bottom bar even before going fullscreen? What if the page is loaded with the iPhone already in landscape mode?
After switching to landscape mode, how could the user know how to restore the view of the button bar at the bottom (and to go fullscreen)? Will a hint be shown similarly to the arrow and the "swipe up" text in your video?

Last question: when will 1.20 be released? I can't wait *g*
Best,
Hans

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

10

Donnerstag, 4. April 2019, 23:22

Hi,

Zitat von »HansvonWeissenfluh«

Wouldn't it be possible to show the bottom bar even before going fullscreen?
You mean resizing to the currently visible space - technically it might be possible, but more tricky and complicated and far less optimal. That would require an additional layer with a fake-size to trick Safari into allowing the scrolling. And then during dragging probably resizes would be necessary to adopt size because the 'remaining-bars-down-height' is not really fix defined and could be anything. And constant resizing during dragging would be bad for performance and might result in a jerky controlling. And then the question about the pano control itself during that phase? Should it be disabled? Should it pan the pano and scroll the page at the same time...?

I've tested and experimented a lot and I think the current solution is the best so far, it works nicely in practice and should be also easy to understand and to use.
And if you're a talented designer you could replace that 'swipe up' texts with some animated info-graphics or something like that (e.g. image an hand-graphic making the gesture) for an even better user explanation ;-).


Zitat von »HansvonWeissenfluh«

What if the page is loaded with the iPhone already in landscape mode?
No problem, the need for swipe-up gestures to get fullscreen mode will be detected anytime in any situation. That means you can anytime have the bars there or bring them there and there is then there is a possibility and information to swipe them away.


Zitat von »HansvonWeissenfluh«

After switching to landscape mode, how could the user know how to restore the view of the button bar at the bottom (and to go fullscreen)? Will a hint be shown similarly to the arrow and the "swipe up" text in your video?
Sorry, I don't understand...?


Zitat von »HansvonWeissenfluh«

Last question: when will 1.20 be released? I can't wait *g*
As soon as possible, I can't wait too ;-).

Best regards,
Klaus

Ähnliche Themen