iPad only media queries for safari in landscape

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 */}

So, you want media queries that work a) on an ipad just in landscape mode or b) on an ipad, landscape mode and ONLY on safari? — scooterlord, Dec 11 '17 at 10:55
@scooterlord I need media queries for **on an ipad, landscape mode and ONLY on safari** . — Vishwa, Dec 11 '17 at 13:35
iPad my require different media queries depending on its [generation](https://www.macworld.co.uk/how-to/ipad/how-identify-which-ipad-you-have-3528437/). My Advice go to this URL: [http://cssmediaqueries.com/](http://cssmediaqueries.com/) in you iPad an you will get its @media on green. Hope it helps. — T04435, Dec 15 '17 at 03:47

score 6 · Accepted Answer · answered Dec 11 '17 at 13:50

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.

This should work, I'll give it a shot. Thing I doesn't get is why I get downvotes — Vishwa, Dec 14 '17 at 09:59
Probably because your question wasn't clear enough in the first place.. — scooterlord, Dec 14 '17 at 10:37
Still it's not clear enough? I added more details and simplified the integrity :( — Vishwa, Dec 15 '17 at 05:24

score 1 · Answer 2 · answered Dec 11 '17 at 11:35

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

This is part of my question. I've tried those already. but the problem is, I need to **find media queries for landscape mode in real iPad device/safari on iOS? Without affecting any other browser** — Vishwa, Dec 11 '17 at 13:36
Have you tried checking out OS and browser and appending a safari specific stylesheet if its true? [link] (https://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript) — Vishnu, Dec 12 '17 at 04:40
yes, I have no problem in getting safari specific css, problem is, they only work in portrait. I want something for safari, in iOS, landscape. That question covers stuff about finding browser using agents. Thank you for trying to help me out. greatly appreciate it however it could be.. — Vishwa, Dec 12 '17 at 10:26

iPad only media queries for safari in landscape

Update

2 Answers2