If you want to set your view for a specific device, you need to use media query css to get that.
To set css for landscape and portrait view, you need to add the following lines into your css file.
@media only screen and (orientation: landscape) {
// css for landscape view
}
@media only screen and (orientation: portrait) {
// css for portrait view
}
When the width of the browser window is greater than its height, it is called landscape view and when the height of the browser window is greater than its width, it is called portrait view.
following is the example that shows how to use media queries for different orientation:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
background-color:lightgreen;
}
@media only screen and (max-device-width: 640px) and (orientation: portrait) {
body {
background-color:lightblue;
}
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
body { background: blue;}
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape){
body { background: red;}
}
</style>
</head>
<body>
<p>Resize the Window to check in portrait and landscape mode.</p>
</body>
</html>
That is how you can set the styles for different views according to the height and width of the device and for landscape or portrait orientation.
0 Comment(s)