CODEWITHSUNDEEP
css
Nikita Kurilovic
Nikita Kurilovic

Reputation: 383

Media query for safari browser

I want the media to work only on safari for a screen of 1280px

This work in all browser, but i want only safari

@media screen and (width: 1280px){


}

Upvotes: 5

Views: 30553

Answers (3)

NIMV
NIMV

Reputation: 1

try this:

@media only screen and (width: 1280px) {


}

Upvotes: -12

Pablo-No
Pablo-No

Reputation: 61

The best option is to use JavaScript:

Here's an snippet to try this detection

if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1 && screen.width=="1280px") {
  console.log("True")
}else {
  document.getElementById("a").display = "none"
  console.log("False")
}
<html>
  <head></head>
  <body>
    <p id="a">Safari mobile<p>
  </body>
</html>

I don't know how to get if media type is screen on CSS.

Upvotes: 0

Lahiru Supunchandra
Lahiru Supunchandra

Reputation: 376

Try this

Webkit:Chrome & Safari (any version)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
property: value;}

Chrome 29+

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
    property: value;
}}

Safari (7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;}

Safari (from 6.1 to 10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
@media {
    /* Your Class */
}}

Safari (10.1+)

@media not all and (min-resolution:.001dpcm) { 
@media {
    /* Your Class */
}}

USEFUL LINKS:browser specific CSS and JavaScript hacks

Upvotes: 12

Related Questions