CODEWITHSUNDEEP
htmlcss
Venu Madhav
Venu Madhav

Reputation: 433

Apply styles only in landscape and only on mobile devices

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.

Upvotes: 2

Views: 3315

Answers (2)

wscourge
wscourge

Reputation: 11281

@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
}

Upvotes: 3

andreas
andreas

Reputation: 16936

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.

Upvotes: 1

Related Questions