Conditional HTML for iPhone

Discussion in 'Web Design and Development' started by ckrueger, May 22, 2008.

  1. ckrueger macrumors newbie

    Joined:
    May 22, 2008
    #1
    I'm in the process of redesigning the results page on an ancient database product. One of the limitations of this product is that only one specific html file is able to display the results of a query. I'm trying to design an iPhone version of the results page and have been somewhat successful using some conditional CSS I found searching online.

    While hiding elements using CSS works somewhat, I'd like to simply write a separate page from scratch. Since redirecting to another page isn't an option, is it possible to include two html pages in one html file? Is there a way to tell the browser "If iPhone" show section 1 of the file, "if else" show section 2?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    JavaScript would be one potential solution. JavaScript can access the browser app name and use that to tell if it's an iPhone, then set styles for elements to be displayed or not, though this would mean the page is shown twice for browsers not using CSS. It's definitely doable, but I'm curious why you feel the iPhone needs a different presentation as its browser was created to view sites fine without web developers having to make special versions of the site.
     
  3. ckrueger thread starter macrumors newbie

    Joined:
    May 22, 2008
    #3
    While the results page is usable on the iPhone the amount of text displayed at once makes for a lot of zooming and panning and is kind of a pain to use.

    Are there any examples of the javascript I would have to use available online?
     
  4. dangerding macrumors newbie

    dangerding

    Joined:
    Dec 21, 2005
    Location:
    MD
    #5
    I use the following to redirect to a specific page designed for the iphone:
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #6
    Just to add a question...

    Is it possible to let you choose between an iPhone version or regular version when you view with an iPhone?

    Kind of like a splash page that only iPhone users see?

    Can't think of how this would work though...
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Hopefully the developer would only be redirecting iPhone users if the site was breaking (or being very unuseful) when viewed with iPhone. If the iPhone supports cookies (pretty sure it does) you could have a link of some sort that would set the cookie to say the user wants the non-iPhone version. Wouldn't be too hard to setup, but generally would be unnecessary.
     
  7. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    Here is a server side solution using PHP, which I prefer because no dependency on JavaScript or anything else client side:



    PHP:
    function detectiPhone(){
    $container $_SERVER[’HTTP_USER_AGENT’];
     
    $useragents = array (
    “iPhone”,”iPod”);
    $this->iphone false;
    foreach ( 
    $useragents as $useragent ) {
    if (
    eregi($useragent,$container)){
    $this->iphone true;
    }
    }
    if(
    $this->iphone){
    echo (
    ”This is a iphone or iphone touch - do something like redirect here”);
    }else{
    echo (
    ”You are not on an iPhone or iPod touch”);
    }
    }


    Just a simple function you call at the top of your script, and if $this->iphone is true, redirect to your iphone HTML. The above is just an example of the concept, customize for your needs. This includes adding any additional user agent keywords that you need to look for.

    -jim
     
  8. BVGuitarPlayer macrumors regular

    Joined:
    Jan 14, 2006
    #9
    Same topic, different question:

    How can you make a <script> run on all browsers except mobile browsers. Specifically, MobileSafari.


    This is the closest I found, anyone have any better ideas, or can anyone offer assistance with modifying this?

    Commenting scripts min JavaScript
    The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the current line. This is needed to hide the string "-->" from the JavaScript parser.

    <SCRIPT type="text/javascript">
    <!-- to hide script contents from old browsers
    function square(i) {
    document.write("The call passed ", i ," to the function.","<BR>")
    return i * i
    }
    document.write("The function returned ",square(5),".")
    // end hiding contents from old browsers -->
    </SCRIPT>

    Found this on http://www.w3.org/TR/REC-html40/interact/scripts.html
     
  9. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #10
    If you have php enabled, editing Angelwatts example

    Code:
    <?php
    function detectiPhone() {
         $container = $_SERVER[’HTTP_USER_AGENT’];
         $useragents = array (“iPhone”,”iPod”);
         $this->iphone = false;
         foreach ( $useragents as $useragent ) {
             if (eregi($useragent,$container)){
                 $this->iphone = true;
             }
         }
         if($this->iphone){
              $script = '
                  /*<![CDATA[*/
                    <SCRIPT type="text/javascript">
                        function square(i) {
                             document.write("The call passed ", i ," to the function.","<BR>")
                             return i * i
                        }
                        document.write("The function returned ",square(5),".")
                    </SCRIPT>
                    /*]]>*/ 
                 ';
          }
     }  
    ?>
    
    <html>
       <head>
           <title>Title</title>
          <?php echo $script; ?>
       </head>
       <body>
             **Content**
       </body>
    </html>
    
    Didn't get the chance to test this, but should work.
     
  10. BVGuitarPlayer macrumors regular

    Joined:
    Jan 14, 2006
    #11
    Thanks a lot.

    I just remembered though, and fortunately I remembered now, that I don't want that to apply to all JS because, I'd like my google analytics to work.

    Any ideas how I might apply that to just these. I have 3 in a row, the first two are linked, and the third one follows this code immediately after.

    Code:
    <script language="javascript" src="includes/popover/PopOVER.js"></script>
    
    <script language="javascript" src="includes/popover/effects.js"></script>
    
    <script language="javascript"> ...script is here... </script>
    I saw that that code is echoed so I'm not quite sure if where the echoes would go in relation the scripts. These are at the top of my source code in the <head> tag and the analytics are where they should be above the </body>. Or at least that's where I've always believed they are supposed to go :D

    Thanks again!
     
  11. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #12
    So you want the function you specified in your first post to only be included when the above three scripts are found?

    Edit: And to only work on the mobile safari browser when it is detected?
     
  12. BVGuitarPlayer macrumors regular

    Joined:
    Jan 14, 2006
    #13
    I would like for those 3 scripts to not show up on mobilesafari. I would like analyticas to work with mobilesafari.

    I would like my 3 scripts and analytics to work with all other browsers (in a perfect world).
     
  13. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #14
    Ok, lets try this. Again, much the same code as above. Im not sure if you also wanted your analytics included in non-mobile me safari. So if it is mobile me, include the analytics. If not, don't include it.

    Code:
    <?php
    function detectiPhone() {
         $container = $_SERVER[’HTTP_USER_AGENT’];
         $useragents = array (“iPhone”,”iPod”);
         $this->iphone = false;
         foreach ( $useragents as $useragent ) {
             if (eregi($useragent,$container)){
                 $this->iphone = true;
             }
         }
         #Initialize the script_Includes and analytics_Includes variables to blank 
         $script_Includes='';
         $analytics_Includes='';
         #If the User agent is NOT mobile, set the  script variable to include the scripts. If it is mobile, set the analytics variable.
         if(! $this->iphone){
              $script_Includes = '
                  /*<![CDATA[*/
                    <script language="javascript" src="includes/popover/PopOVER.js"></script>
    
    <script language="javascript" src="includes/popover/effects.js"></script>
    
    <script language="javascript"> ...script is here... </script>
                    /*]]>*/ 
                 ';
          }
         else
         {
              $analytics_Includes= '
                    ANALYTICS CODE
              ';
         }
     }  
    ?>
    
    <html>
       <head>
           <title>Title</title>
          <?php echo $script_Includes; ?>
       </head>
       <body>
             **Content**
           <?php echo $analytics_Includes; ?>
       </body>
    </html>
    
    Closer?

    If you ALWAYS want to include your analytics, just put it in at the end of the page via normal script/html, rather then the php variable.
     

Share This Page