How to Apply CSS Based on Screen Orientation

Hello friends today we gonna learn about How to Apply CSS Based on Screen Orientation. So read this article, How to Apply CSS Based on Screen Orientation step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

• Guide: How to Apply CSS Based on Screen Orientation
• Device orientation
• Example
• Further sources
• How to Apply CSS Based on Screen Orientation: benefits
• Faq
• Final note

Guide: How to Apply CSS Based on Screen Orientation

This article is part of us “HTML5 / CSS3 Tutorials series” – committed to helping you become a better designer and / or developer. click here to see more articles from the same series.

With the introduction of CSS3 Media Queries, we are able to shift and apply CSS between different viewport or device screen sizes.

We can detect the width threshold of the viewport to which we want to apply the style rules with the min-width or max-width declaration within the Media Queries, as we showed in our Responsive Design Series.

Device orientation

Mobile devices can be controlled with two orientations, portrait and landscape. In some cases, we may also need to apply these styles based on the orientation of the device, regardless of the width of the device’s viewing window. To operate different style sheets based on screen and orientation statement in the stylesheet link:

Applies styles for iPad, iPhone, Android, Safari, and Firefox. Alternatively, we can also add the orientation statement within the Media Queries, like so.

@media all en (orientation: portrait) {/ * Styles for portrait screen * /} @ media all en (orientation: landscape) {/ * Styles for landscape screen * /}

As W3C described regardless of device type (mobile or desktop), if the height of the viewing window is greater than its width, the orientation is described as portrait. Conversely, it is described as landscape when the width of the viewport is greater than its height.

Example

Below are some of the test examples in iPhone, iPad and Desktop with landscape and portrait orientation.

iPhone (portrait)

iPhone (landscape)

iPad (portrait)

iPad (landscape)

Desktop (portrait)

Desktop (landscape)

You can see the demo in action for yourself and download the source code from the following links. Resize the browser window or rotate your device screen to see different results, as shown in the screenshots above.

• View demo
• Download source

Further sources

• iPad Orientation CSS – Cloud Four
• CSS3 Media Queries – W3C

How to Apply CSS Based on Screen Orientation: benefits

Faq

Final note

I hope you like the guide How to Apply CSS Based on Screen Orientation. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Apply CSS Based on Screen Orientation, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Apply CSS Based on Screen Orientation”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Apply CSS Based on Screen Orientation, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.