问题描述:

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

网友答案:

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
 }
网友答案:

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;
  }
}
相关阅读:
Top