[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to detect iPhone using CSS or Javascript

Posted on 2009-12-20
2
Medium Priority
?
1,928 Views
Last Modified: 2012-06-27
I am trying to display three different stylesheets for iPhones, other handheld devices vs PCs, but I am unable to detect an iPhone using any approach. Unfortunately I don't have an iPhone and am using an iPhone simulator for testing, so I'm not sure if the code below doesn't work on the iPhone or just doesn't work on the iPhone simulator. My preference would be to resolve this using CSS or a Meta tag, but I will use Javascript if necessary.

Approach #1: CSS

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->
<link href="blackberry.css" rel="stylesheet" type="text/css" media="handheld"> 
<link href="pc.css" rel="stylesheet" type="text/css" media="screen"> 


Approach #2: Javascript

<script type="text/javascript">
if (screen.width <= 480) 
	{document.write('<link href="iphone.css" rel="stylesheet" type="text/css">');} 
</script>


Approach #3: Meta tag

<meta name="viewport" content="width=320">

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

Open in new window

0
Comment
Question by:mariita
2 Comments
 
LVL 11

Expert Comment

by:asafadis
ID: 26092583
0
 
LVL 3

Accepted Solution

by:
netozai earned 2000 total points
ID: 26093037
For optimizing Web content for iPhone OS, see below for recommended guidelines from Apple:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html

The page above includes useful information, such as:
  • JavaScript sample code for detecting Safari on iPhone and iPod touch
  • User agent strings for iPhone and iPod touch running on iPhone OS
A few other resources:

How to detect mobile devices?
http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm

iPhone & iPod Detection Using Javascript
http://davidwalsh.name/detect-iphone

Detect Mobile Browser - Open source mobile phone detection
http://detectmobilebrowser.com/

In general...

Why browser sniffing is bad, and what are the alternatives?
  • Building standards compliant web sites is preferred over designing sites for specific browsers.
  • If necessary to employ any browser detection techniques, the most commonly used technique, parsing user-agent string using client-side script, is not considered reliable and is not promoted as the first choice.
    • Using Conditional Comments (Using Conditional CSS), or Detecting Features (Object Detection) are considered as better approaches.
    • When detecting features, doing so on the server-side is also recommended over using client-side script.
http://msdn.microsoft.com/en-us/library/ms537509%28VS.85%29.aspx#UsingCCs

http://developer.apple.com/internet/webcontent/objectdetection.html

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month20 days, 2 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question