Media query not working for ipad - css

Question

Hi I wrote media query to have responsive view of navbar in ipad. My media query is not working.
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
margin-left: 50px;
position: relative;
display: block;
}
#media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
.nav-tabs>li>a {
color: #2b2b2b;
font-size: 13px;
line-height: 26px;
padding: 4px 12px;
outline: none;
position: relative;
display: block;
}
}
Any suggestions why it is not working?

Answer 1

device-width and device-height are both deprecated media features, you should use max(/min)-device-width and max(/min)-device-height instead.
You can check the list of available media features here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

Chris Coyier at CSS-tricks wrote a really good - slightly outdated - reference for almost all devices. The code below relates to I-pads and how to specifically target them with CSS.
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* -- style goes here -- */
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* -- style goes here -- */
}