How to detect iPhone using CSS or Javascript

Posted on 2009-12-20
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"/>


<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">');} 


Approach #3: Meta tag

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

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


Open in new window

Question by:mariita
    LVL 11

    Expert Comment

    LVL 3

    Accepted Solution

    For optimizing Web content for iPhone OS, see below for recommended guidelines from Apple:

    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?

    iPhone & iPod Detection Using Javascript

    Detect Mobile Browser - Open source mobile phone detection

    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.


    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Let me explain this picture a little bit.  First, in case you haven't already guessed, you are looking at my 2 phones, an Android Samsung Galaxy S5 on the left and an iPhone 5 on the right.  They are on their respective cradles on my desk.  But, you…
    Once again I push the limits of my phone.  An introduction to the Android Google Now Launcher.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now