Checking for mobile device

Get Started
1

Hi all

I was wondering how do I check for a mobile phone/tablet so that I can load a slightly different style sheet?

thanks!

2

<link rel=“stylesheet” href=“/styles.css” media=“screen”>
<link rel=“stylesheet” href=“/mobile.css” media=“handheld”>

Note that many high-end mobile devices ignore the ‘handheld’ stylesheet and use the ‘screen’ one instead. (I guess they consider themselves big boys now and don’t like to have their hand held :cool:)

3

Usually (not always) you aren’t caring about the device, but the screen size. Media queries checking for screen size are what many people do.

Don’t get sucked into “here’s the sheet for the iPhone and here’s the sheet for the iPad and here’s the sheet for my 32” Mac monitor" because you’ll be doing way too much work. Look at your (potential) visitors and break the screen sizes into 2 or 3 general groups, and have your design deal smoothly with those.

If you are still looking at device-specific, you might be wondering about touch devices vs mobiles with keyboards vs mobiles with pointers (like a trackball or arrow keys that move a pointer onscreen). There are a few general rules starting to come out of research (like, avoid styling menus as dropdowns in tiny screens or on touch devices) and some new Javascript functions (Touch events). See more on PPK’s Quirksmode.org site.

4

thanks for that extremely useful information - definitely food for thought! I think you’re right the distinction I wish to make it smaller touch screen versus everything else - and with the option for the “touch screen” layout to also be shown in regular layout.

5

Just one follow-on question, how do you slide the page up to hide the address bar in an iPhone/Android browser

6

I have no idea, but I just asked in DuckDuckGo and got this:
How to Hide the Address Bar in MobileSafari « Mobile

Android is webkit like Safari (on iPhone) is webkit so in many ways they are the same, so maybe this helps?