script for reading IOS version on iPad

**Shammus** · 02-06-2012, 08:46 PM

Was trying to implement a script that would read whether or not you're using IOS 5 for the iPad and adjust the CSS accordingly. The script below assumes that the app is being built in 4.3 and adds an adjustment to the <footer> CSS class if the page is being viewed in IOS 5.

Problem is, it's not working. Any thoughts on what I might be doing wrong?

Thanks in advance....

-----------------------------------------

<!DOCTYPE html>

<html lang="en">
<head>

<style type="text/css">

body {}
article {position:relative; height:500px; background:red;}
footer {position:absolute; bottom:100px;}
h3 {position:absolute; top:100px;}

</style>

<script type="text/javascript" charset="utf-8">

var iOS5 = navigator.userAgent.match(/OS 5_/i) != null;
if (iOS5) {

$("footer").css('bottom','0');
$("body").append('<h3>This is for iOS5</h3>');

}

</script>

</head>

<body>

<article>
<footer>This is the footer.</footer>

</article>

</body>
</html>

**Shammus** · 02-06-2012, 09:04 PM

Sorry, guys, I think I just fixed my own problem....added the call to jquery back in there...

thanks much,
Brian

**jscheuer1** · 02-06-2012, 09:15 PM

At least three things could be going wrong there, one of them certainly is, probably two, and perhaps the third, in that order:

Neither the body nor the footer have been parsed yet, so those commands will have no affect.
Those are jQuey functions, but jQuery doesn't appear to be associated with the page.
The test for the userAgent string might be too vague.

I may have missed something else though. And now this isn't a problem, but you don't have to match, test() will do and it's more efficient.

Assuming your regular expression is detailed enough, try:

Code:

<!DOCTYPE html>

 <html lang="en">
 <head>


 <style type="text/css">

 body {}
 article {position:relative; height:500px; background:red;}
 footer {position:absolute; bottom:100px;}
 h3 {position:absolute; top:100px;}

 </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script type="text/javascript">

jQuery(function($){
	 var iOS5 = /OS 5_/i.test(navigator.userAgent);
	 if (iOS5) {
	
		 $("footer").css('bottom','0');
		 $("body").append('<h3>This is for iOS5</h3>');
	
	 }
}); 

 </script>

 </head>

 <body>

 <article>
 <footer>This is the footer.</footer>

 </article>

 </body>
 </html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

Thread: script for reading IOS version on iPad

Thread Tools

Search Thread

script for reading IOS version on iPad

Bookmarks

Bookmarks

Posting Permissions