EN
CSS - how to detect orientation for media queries?
1 answers
0 points
Is there any way to detect device orientation in CSS? I need it for media queries in my project.
Something like:
xxxxxxxxxx1
@media (width > height) {2
/* ... */3
} 1 answer
0 points
Quick solution:
xxxxxxxxxx1
@media (orientation: portrait) {2
/* portrait styles here (width <= height) */3
}4
5
@media (orientation: landscape) {6
/* landscape styles here (width > height) */7
}
Practical example
In this example, div element background will be yellow on portrait orientation (vertical) and orange on landscape orientation (horizontal).
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
width: 100%;8
height: 500px;9
}10
11
@media (orientation: portrait) {12
div {13
background: yellow;14
}15
}16
17
@media (orientation: landscape) {18
div {19
background: orange;20
}21
}22
23
</style>24
</head>25
<body>26
<div>Web page content here...</div>27
</body>28
</html>
References
0 commentsShow commentsAdd comment
