2

I am using @media (orientation:landscape){..} media type to apply styles only in landscape mode and it should apply only in Mobile Devices below 767px.

wscourge
  • 10,657
  • 14
  • 59
  • 80
Venu Madhav
  • 413
  • 1
  • 5
  • 14
  • Possible duplicate of [CSS media query to detect device type regardless of size](http://stackoverflow.com/questions/22085063/css-media-query-to-detect-device-type-regardless-of-size) – wscourge Oct 27 '16 at 09:27

2 Answers2

3
@media (orientation:landscape) and (max-width: 767px){..}

For detecting device type, you can use javascript:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // your code which add styles
}
wscourge
  • 10,657
  • 14
  • 59
  • 80
  • It should only work in Mobile Devices but that media type will work in both desktop and Mobile Device, I need it should only apply my styles in mobile device, I mean if i resize my browser into below 767px it should not work in the browser. – Venu Madhav Oct 27 '16 at 09:25
  • Then you should take a look on that question http://stackoverflow.com/questions/22085063/css-media-query-to-detect-device-type-regardless-of-size – wscourge Oct 27 '16 at 09:27
  • Sorry for my misunderstanding ;) – wscourge Oct 27 '16 at 09:28
  • 2
    I found one solution its working for me **max-device-width** it is working only in mobile devices, its not working in browser in resize mode. – Venu Madhav Oct 27 '16 at 09:51
  • Nice one, I didn't think of it. Just make sure it's properly supported, I cannot find it on www.caniuse.com :). – wscourge Oct 27 '16 at 09:56
1

If you just want to identify the mobile devices by your given width, than you can use max-width in your media query as well:

@media (max-width: 767px) and (orientation: landscape) {
  ...
}

Furthermore there is a nice article on CSS-Tricks about how to apply the styles to different devices with media queries.

You can also use handheld type in your media query, but unfortunately that's not supported by most of the modern mobile devices (they identify themselves as screen).

To really detect if a device is mobile, you need to use Javascript. See this post or this post.

Community
  • 1
  • 1
andreas
  • 16,357
  • 12
  • 72
  • 76
  • Actually it should not work in browser if i resize my browser in to 767px , It will work as per my requirement ? – Venu Madhav Oct 27 '16 at 09:28