Conditional HTML for iPhone

[ckrueger]

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?

 

[angelwatt]

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.

 

[ckrueger]

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?

 

[angelwatt]

Some links:

Browser detection
http://www.askdavetaylor.com/detect_apple_iphone_user_web_site_server.html
http://www.w3schools.com/js/js_browser.asp
http://www.pageresource.com/jscript/jbrowse.htm

Show/hide content
http://www.cssnewbie.com/showhide-content-css-javascript/

JavaScript redirection
http://www.pageresource.com/jscript/jredir.htm

 

[dangerding]

I use the following to redirect to a specific page designed for the iphone:

<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.replace("iphone.html");
}
-->
</script>

 

[design-is]

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...

 

[angelwatt]

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

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.

 

[SrWebDeveloper]

Here is a server side solution using PHP, which I prefer because no dependency on JavaScript or anything else client side:

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

 

[BVGuitarPlayer]

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

 

[Cerebrus' Maw]

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?





Found this on http://www.w3.org/TR/REC-html40/interact/scripts.html

If you have php enabled, editing Angelwatts example

<?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.

 

[BVGuitarPlayer]

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.

<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

Thanks again!

 

[Cerebrus' Maw]

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?

 

[BVGuitarPlayer]

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).

 

[Cerebrus' Maw]

Thanks a lot.

<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

Thanks again!

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.

<?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.