3

maybe this is simple but I havent found the answer yet

How do I detect either iphone, ipad, ipad, android phone in any mode via CSS?

I read this Detect iPhone/iPad purely by css that describes how to detect all the specific devices

But what I am looking for is to distinguish between desktop/laptop AND all ipad/ipod/iphone/android devices in general

Community
  • 1
  • 1
snh_nl
  • 2,877
  • 6
  • 32
  • 62

2 Answers2

6

Here are my notes on the matter: For any device - do your research on it's screen sizes and ratios and then do a @media query in your stylesheet for each device.

iPhone4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

(portrait or landscape) on the iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Mobile Phones Portrait

 @media screen and (max-device-width: 480px) and (orientation: portrait){
 /* some CSS here */
 }

Mobile Phones Landscape

@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

Mobile Phones Portrait or Landscape

@media screen and (max-device-width: 640px){
  /* some CSS here */
}

iPhone 4+ Portrait or Landscape

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

iPhone 5 Only

@media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-    webkit-min-device-pixel-ratio: 2) {
    /* styles here */
}

iPhone < 5: aspect ratio

@media screen and (device-aspect-ratio: 2/3) {}

Tablets Portrait or Landscape

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

Desktops

@media screen and (min-width: 1024px){
/* some CSS here */
}

Styles only between two sizes.

@media screen and (min-width: 319px) and (max-width: 1281px){}

BTDUBS - Did you know that WordPress has an is_iphone() global built in?

global $is_iphone;
if ( $is_iphone ) {
 // do something if $is_iphone is true
 }
Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
  • Thanks Ben - but I would say that the initial query was related more to : what simple CSS way is there the distinghuis betw mobile device and laptop/desktop – snh_nl Feb 20 '13 at 12:05
  • Only screen sizes from my research my friend! If you come across something else please post it here. – Ben Racicot Feb 20 '13 at 16:22
  • And many thanks for that!! Seems that the media query "handheld" looked like an option, but nobody implemented it – snh_nl Feb 21 '13 at 16:35
3

you could use @media queries to solve your problem, the below maybe something you could try. You can also you device orientation as a setting to target your devices or set your max width like below and then write your css. Hope this helps.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}
Rosario
  • 81
  • 3