Reputation: 3081

css specifically for ipad

I need to create a page which will look differently on an ipad. I have never done this before so I have a few questions:

1) How can I make a page know its being viewed on an ipad for css purposes?

2) If some content on the page is different for an ipad, how can I use php to know what device is loading the page (because this can't be done with css)?

Upvotes: 0

Answers (3)

Theodore Brown

Reputation: 947

I'll start by answering your second question. The only way to detect a particular device type in server-side code is through user-agent parsing. In PHP, you could do this with the strpos() function, which returns FALSE if the second string parameter is not contained in the first. For example:

$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'iPad') !== FALSE) {
    // load iPad-specific content
} else {
    // load content for other devices
}

To answer your first question, there is no way to detect only an iPad using CSS. You could use media queries to target 1024x768 displays, but these would apply to any screen with that resolution (not just the iPad). If you want to apply iPad-specific CSS styles, load a unique stylesheet with the aforementioned PHP code.

However, it should be pointed out that device detection is generally a bad practice, since it will not account for changing browser capabilities, market trends, or user-agent spoofing. In most-cases, CSS media queries provide a more robust, forward-leaning approach to supporting various devices. Why? Because they target device types, rather than specific models. This means that your site can work well today on iPad, Android, and Windows tablets, and next year on whatever hot new xyz device hits the market (without requiring code changes).

Upvotes: 2