Question

I use alot of transition, hover, and shadow effects on the desktop version of my site. I need to get rid of them for my tablet version which I thought I could do with media queries but my issue is when i use something like @media only screen and (min-width : 1224px) to target desktops then a user needs to have their browser window maximized or they get tablet targeted css. So if a desktop users browser is at 1000px then they get the same css as someone on an Ipad. Now I’m told that browser sniffing is unreliable so how else can I differentiate between a user on a 1000px desktop browser and a 1000px tablet device?

Answer 1

body {
  background-color: #bada55
}


/* Regular media queries for a smaller desktop */
@media only screen 
and (min-device-width : 768px) 
{
/* Add styles here */
} 



/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Add styles here */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Add styles here */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Add styles here */
} 

Check the example in jsbin – http://jsbin.com/uxipeh/1/ and a full list of options here