CSS detects iphone ipad or any other pocket
It may be simple, but I haven't found an answer yet
How to define iphone, ipad, ipad, android in any mode using CSS?
I read this Detecting iPhone / iPad purely css which describes how to detect all specific devices
But what I'm looking for is to differentiate between desktop / laptop and all ipad / ipod / iphone / android devices in general
source to share
Here are my notes on the subject: For any device - do your research on its dimensions and screen ratios and then run an @media query on the 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 iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Portrait of mobile phones
@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) {}
Pills Portrait or Landscape
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
Desktop computers
@media screen and (min-width: 1024px){
/* some CSS here */
}
Styles are only between two sizes.
@media screen and (min-width: 319px) and (max-width: 1281px){}
BTDUBS - Did you know that WordPress has a built-in global is_iphone () system?
global $is_iphone;
if ( $is_iphone ) {
// do something if $is_iphone is true
}
source to share
you could use @media queries to solve your problem, maybe something you could try. You can also adjust the device orientation as a setting for your devices or set the max width as shown below and then write your css. Hope this helps.
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
source to share