Full screen function for mobile devices - help and advice please
We're currently publishing our virtual tours using iframes in the pages of our website. We're having to do it like this because putting the tours into the page directly is causing problems on mobile devices. (if the page needs to and is scrolled at all, the in-tour interface buttons stop working, including the leave fullscreen button - a problem the Kolor exported html also have if you add more content)
our current solution is this...
We're exporting two versions of all virtual tours: a regular one with integrated buttons, and a mobile device one with no buttons. The only change I'm making to the standard exported html pages is removing the H1 title and 90% width/height values are made 100% (effectively making them full screen).
On our potfolio pages we have a div to contain the tour and in that we have a user agent query for iphone/android/etc or not.
If the site is being viewed on a PC then you see an iframe with the regular tour with buttons; If the site is being viewed on a mobile device you see an iframe with the mobile version without buttons AND an html based link to view the html file directly emulating full screen for mobile users.
We are wondering is if there's a more elegant solution in which the tour buttons do work on mobile devices from a real web page. The html files exported from the software do work if you don't do anything to them, but try and build a real web page around them and we run into problems.