iPad only media queries for safari in landscape - html

Question

When using CSS, I can properly align my elements using css with Chrome. In chrome inspector-> ipad view, all looks as they should be. But when I test it on actual iPad, some CSS are not applied. I've found ipad specific CSS media queries as follows,
** /* Safari 7.1+ */ **
_::-webkit-full-page-media, _:future, :root .my-class {
padding-right: 0;
}
**/* Safari 10.1+ */**
#media not all and (min-resolution:.001dpcm) { #media
{
.my-class {
padding-bottom: 0;
}
}}
**/* Safari 6.1-10.0*/**
#media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { #media
{
.my_class {
padding-bottom: 0;
}
}}
Problem is, while they're working fine with portrait mode, There is no specified way for me to apply CSS into landscape mode. How can I use media queries for landscape mode in real iPad device/safari on iOS? Without affecting any other browser?
Update
I'm not looking for standard media queries like,
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES */ }
Landscape Mode
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES */}

Answer 1

What you are looking for cannot be achieved with media queries alone, you must use Javascript to find an Ipad Safari user agent:
function isiPad() {
return (
(navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1)
);
}
Using this Javascript, you can detect if the device is an Ipad, and apply a class on the body - using Jquery in the following example:
if (isIpad) {
$('body').addClass('isIpad');
}
Afterwards, write your media queries as suggested above:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.isiPad .myclass {
/*styles*/
}
}
Although I can see why an iPad differentiation is needed, I can't understand why a Safari differentiation is - so, a user would visit the same webpage/webapp with Safari and see something different compared to Chrome or Opera or a different browser? :/ UX-wise doesn't sound right.

Answer 2

You should try this one first as it covers current Safari versions and is pure-Safari only:
This one still works properly with Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
color:#0000FF;
background-color:#CCCCCC;
}
}
here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Alternate method:
/* Safari 11+ */
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none)
and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
To use them:
<div class="safari_only">This text will be Blue in Safari</div>
And also you can make use of JavaScript to detect the browser and append a specific stylesheet if its Safari, for eg:
var isSafari = /Safari/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css"
href="path/to/safari.css">')
};