Script for cross-browser compatibility

  • Hi Everyone,

    Has anyone successfully been able to write instructions to detect browser and have different target sizes. Right now if I set my height and width on the swf you cannot effectively view it on an ipad or ipod touch. If you leave eveything in full screen then the ipad and iphone shows thumbs and images correctly but the issue is when you open a regular browser then it shows everything in fullscreen as well. I've been looking at javascript sites to write something but not being a coder I can't get something to work and unfortunately all my clients have different sizing requirements.

    Hope someone can help.

    Thanks in Advance.
    Robert

  • Hi Klaus,

    I would like to be able to set the swf to a certain height and width so that it can be viewed correctly on IE, FF, etc without it messing up on an ipad or iphone. If i remove the height and width in the following statement;

    Quote

    var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", target:"krpanoDIV"}); --- Uses all screen real estate when viewed in IE, FF etc. but works correctly on ipad or iphone.

    Quote

    var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", width:"900", height:"700", target:"krpanoDIV"}); --- Embeds in page and sized correctly for IE, FF etc. but when viewed by ipad or iphone the set width and height causes problems and almost seems like it is zoomed in and cannot see thumbs.

  • Hi,

    I'm still not sure what you want to achieve
    but you could simply check for the useragent:

    Code
    var viewer = null;
    
    
    var ua = String(navigator.userAgent).toLowerCase();
    if (ua.indexOf("iphone"))
      viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", target:"krpanoDIV"});
    else
      viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject",  width:"900", height:"700", target:"krpanoDIV"});
    ...

    or alternatively keep the 100% width and height use CSS iphone orientation settings to size the krpanoDIV element
    itself dynamically depending to the screen size and orientation,

    best regards,
    Klaus

  • Thanks Klaus,

    I'll try the example and see if I can get it to work. But to explain myself hopefully clearer, my client has their own website and they have allocated space on a page, they want to use one html file to open in an allocated space of 700px x 550px so I set that one statement to do that. They want to use the same html file should someone come in on an ipad and view it correctly there. The width/height settings mess up the images on the ipad and everything is zoomed in and it doesn't show the thumbs at the bottom left nor the intro image in the center. It moves it down out of the view of the screen.

    I'll work with the user agent and see if it will solve the problem.

    Thanks

    Robert

  • ok, I can't get Klaus' example to work. Here is a visual attempt to try and explain what is happening with the iphone. The image below shows the clients webpage and the flash side is embedded. It is embedded with width and height set 700px x 550px

    The second image shows how it looks on the iphone when the flash is width and height is set. Notice the image appears zoomed and you cannot see the thumbs

    Now look at the the image when the width and height are removed. Notice, now you can see the thumbs and the image appears normal. Also the flash embedded on the client site just opens at 100% which forces scrollbars to appear.

    Hope now everyone see the problem and can offer a solution.

    Thanks.

    Robert

  • Hi,

    the most krpano examples html files are designed to set the window size to native iPhone/iPad resolution,
    see this line in the html:

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

    so your fixed size element can be larger then the window viewport,
    the same would happen when you resize the browser window to a size smaller then 700px for example,

    if don't want to use the native width and height because you are using absolute pixels sizes,
    just change the reference screen size with the meta viewport settings,

    here some further links about web design for the iPhone:
    http://www.mobilexweb.com/blog/iphone4-i…safari-viewport
    http://www.boutell.com/newfaq/creating/iphone.html
    http://csswizardry.com/2010/01/iphone…phone-websites/

    best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!