Geek asks and answers

Set two screen sizes for Chrome only

I use @media queries to only make the Chrome browser to position the ".l-triangle" in a specific position. Therefore, I use the following method

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Fix for Chrome / Safari Users ONLY */

.l-triangle {
   background: transparent url('../images/menu_bg_left.gif') no-repeat;
   position: absolute;
   float: left;
   width: 55px;
   height:75px;
   display: block;
   left: 0px;
   top:0px;
   z-index: 0;
    -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
       -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
            box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
}

It works fine for Chrome browsers with a screen size greater than 968 pixels, but not 968 pixels.

My questions are: how do I pass 2 different css values ​​for Chrome browsers with two different screen sizes?

+5
source share
2 answers

I think you have the same problem here .

This code only works in Chrome:

.chrome #thingie {
   do: this;
}

I hope this helps you.

0
source

- , "" "".

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 968px) {
...code here...
}
0

More articles:


All Articles