5

I've done a bit of searching and have tried a few different things, but for the life of me I cannot seem to specifically target the Samsung Galaxy S5. I'm just playing around with a few things while working on a site but nothing I try seems to target the specific device.

Here is what I have tried so far:

@media only screen
(min-resolution: 144dpi)
and (device-width: 1920px)
and (orientation: landscape) {/*styles here*/}

@media screen
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi)
and (device-width: 1920px)
and (orientation: landscape) {/*styles here*/}

@media only screen
    (device-width: 1920px)
    and (orientation: landscape) {/*styles here*/}

@media only screen
(min-device-width: 1080px)
and (max-device-width: 1920px)
and (orientation: landscape) {/*styles here*/}

*Note: I've only included "landscape" specific code, but I have tried it without that and with "portrait", but it still doesn't work.

Any help would be greatly appreciated.

lardlad
  • 51
  • 1
  • 1
  • 3
  • 2
    To be able to help, I need to know *why* you want to target it. What is the desired outcome that you need the identification for? Or: what is the practical problem that needs to be solved? Because there may be much easier methods. – Frank Conijn - Support Ukraine May 14 '14 at 03:27
  • 1
    If you have the S5 browse to; http://pieroxy.net/blog/pages/css-media-queries/test-features.html - this will give you the specific values that are eluding you. – CaRDiaK May 14 '14 at 10:56
  • @FrankConijn - the site I am currently building has a header image that I would like to swap out to look good on each device. its not imperative to the function of the site, it just will make for a nicer user experience. – lardlad May 14 '14 at 11:50
  • @CaRDiaK - Thanks for the link. I think that will get me headed in a the right direction. – lardlad May 14 '14 at 11:51
  • I have had problems with several S Galaxy models not rendering content when using media queries. I don't know a solution. – posfan12 Aug 24 '16 at 14:34

3 Answers3

6
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

According to source.

Hope it helps.

Cheers

kumarharsh
  • 18,961
  • 8
  • 72
  • 100
g_kou
  • 81
  • 1
  • 3
0

this worked for me...

/* Samsung Galaxy S5 Portrait */    
@media screen(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)and (device-          width: 1440px)and (orientation: portrait){ 
/*Your styles here */
    html{
  display: none;
  }
}
rklump
  • 1
0

Try using @media screen and (max-width: 680px) and (orientation:landscape) this helped me out alot I also have a samsung galaxy s5

Candice Moses
  • 13
  • 6