Auto detect device request (ipad/iphone/web) code

[rjdesignonline]

I'd like one QR code or other triggering element to recognize the device requesting the VR asset and display correctly for that device (iPhone/iPad-web)...
I tried placing the code after the ID portion in the "skin.js" with no luck.

From here...
http://scottrockers.com/blog/resources/ ... on-website

<script type="text/javascript"> // <![CDATA[
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
document.location = "http://www.scottrockers.com/iphone.html";
} // ]]>
</script>

[Hopki]

Hi,
You can output an HTML page that will auto detect between Flash and HTML5.
You can set the Flash output to be multi-resolution and have an output as low as 400px so flash enabled Android devices can display them.
Then you can output the HTML5 output and set up an output to accommodate the iPhone and iPad.
You can also use the information from this KB doc: http://gardengnomesoftware.com/wiki/Usi ... TML5_skins
To switch skins for computer/ipad and iPhone/iPod Touch devices.

I think that will cover most devices,
Regards,
Hopki

[rjdesignonline]

Hello Hopki: Following the KB link exactly worked for all components but the actual rotating object, it does not resize at all. sample here
http://rjdesignonline.com/_VR/Coll_SWAP/index.php

The only discrepancy I can see is that the tutorial shows Pano containers as percentages rather than pixels. I tried using 100% (like the tutorial - FAIL) The fixed 767/858 seems to be the problem, how do I correct this?

Regards, -Rick


<script type="text/javascript" src="object2vr_player.js">
</script>
<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))) { ?>
<script type="text/javascript" src="skin_iphone.js">
<?php } else { ?>
<script type="text/javascript" src="skin_ipad.js">
<?php } ?>
</script>
<div id="container" style="width:767px;height:858px;">

[Hopki]

Hi,
In the head section of the HTML page Object2VR outputs remove:

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

This was put in to stop resizing.
Regards,
Hopki

[rjdesignonline]

Hopki: Cool, works for desktop and iphone but the ipad is a unplanned smaller third size approximately 600x650???? take a look


http://rjdesignonline.com/_VR/Coll_SWAP/index.php

Regards, -R-

[Hopki]

Hi,
On my iPad I get the same as on the iPod Touch 4th gen
The page scales to the width?
Regards,
Hopki

[rjdesignonline]

both assets are built portrait mode. (767w x 860h / 308w x375h) It resizes nicely, but the devices orientation is backwards (landscape mode = correct sizing but wrong orientation – designed for portrait = clipped view)

I'm scouring the index.php file but I'm not certain what to look for. I messed with
<meta name="viewport" content="height=device-width

and got the ipad to display portrait correct but magnified and clipped when turned landscape. The iphone asset is all out of whack both landscape and portrait. THe answers seems likely somewhere in this area but I'm clearly beyond my depth here.

Correct ipad/desktop
http://rjdesignonline.com/_VR/Coll35_Tablet/index.html
Correct iphone
http://rjdesignonline.com/_VR/Coll35_Phone/index.html

Swapped ipad/desktop-iphone
http://rjdesignonline.com/_VR/Coll_SWAP2/index.php