IPad only media queries for landscape safari

Question

When used CSS, I can correctly align my elements with css c Chrome. In chrome inspector-> ipad mode, everything looks as it should. But when I test it on the iPad itself, some CSSdo not apply. I found ipad specific CSSmedia 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;
  } 
}}

The problem is that they work great with portrait mode. For me there is no specific way to apply CSSin landscape mode. How can I use media queries for landscape mode in a real iOS iPad / Safari? Without affecting any other browser?

Update

I am 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

, , -, Javascript Ipad Safari:

function isiPad() {
  return (
    (navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1)
  );
}

Javascript, , Ipad, body - Jquery :

if (isIpad) {
  $('body').addClass('isIpad');
}

-, :

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
   .isiPad .myclass {
    /*styles*/
  }
}

, iPad, , Safari - -/webapp Safari - Chrome Opera ?:/UX-wise .

Answer 2

, Safari Safari:

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; 
  }
}

, Safari 10.1 +:

, .

 /* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

.safari_only { 
    color:#0000FF; 
    background-color:#CCCCCC; 
   }
}}

:   /* Safari 11+ */

@media not all and (min-resolution:.001dpcm) { 
@supports (-webkit-appearance:none) 
and (stroke-color:transparent) {

.safari_only { 

    color:#0000FF; 
    background-color:#CCCCCC; 
    }
}}

:

<div class="safari_only">This text will be Blue in Safari</div>

JavaScript , Safari, :

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">') 
};