1

I try to hide some elements in iPhone 5 & 5S in portrait & landscape but it was effecting for all iphone devices, below is the code.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

span.hmlabel{
display:none;
}

}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Durgesh
  • 33
  • 6
  • Since you have a js tag: look into using javascript navigator object to add css or a class for a specific client. Some examples [here](http://stackoverflow.com/questions/4345671/how-to-change-css-class-depends-on-browser/26780555#26780555) and [here](http://stackoverflow.com/questions/15550890/conditional-css-for-internet-explorer-10-only/15551240#15551240) – yezzz Apr 16 '17 at 12:52
  • Did you try to look at this? http://stackoverflow.com/questions/12539697/iphone-5-css-media-query? If yes and it's not working, then maybe you need some js help for this – Christian Esperar Apr 16 '17 at 13:01
  • Reading iphone5 has a longer screen vertically you might get away with targeting specific (min/max) width and a min-height larger than "standard". Otherwise use the ratio, or js. – yezzz Apr 16 '17 at 13:14
  • Possible duplicate of [iPhone 5 CSS media query](http://stackoverflow.com/questions/12539697/iphone-5-css-media-query) – Asons Apr 16 '17 at 13:58
  • I tried in different way this one works @media screen and (device-aspect-ratio: 40/71) {} in portrait view, but landscape failed. I'm looking pure css stuff instead of using js hookup. – Durgesh Apr 16 '17 at 14:02

1 Answers1

0
I just tired like this works perfect. 

@media screen and (device-aspect-ratio: 40/71) {
  span.hmlabel{
    display:none;
  }
}

@media screen and (device-aspect-ratio: 71/40) {
  span.hmlabel{
    display:none;
  } 
}
Julian
  • 33,915
  • 22
  • 119
  • 174
Durgesh
  • 33
  • 6