Issue
How can we toggle class of an element
based on orientation of device.
Example:
<div class="landscape"></div>
@media (orientation: portrait) {
.landscape: {...}
}
I can change landscape
css properties. but I want to avoid this.
Instead, I would like to change the class itself thus, it would look like
<div class="portrait"></div> // if orientation is portrait
<div class="landscape"></div> // if orientation is landscape
Any suggestions for this!
Note: Would accept answer for vue
as well
Update: screen.orientation
doesn't work on safari
. solution should work on safari
too.
thanks for your appretiatable answers.
Solution
Check out this code using matchMedia
. But maybe I made a mistake somewhere in this code. But the essence and structure are correct.
window.matchMedia('(orientation: portrait)').addListener(function(m) {
let div_class = document.querySelector('.landscape');
if (m.matches) {
div_class.className = 'portrait';
} else {
div_class.className = 'landscape';
}
});
Answered By - s.kuznetsov
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.