I recently had to make a project compatible with smartphones in landscape mode. Since I've never done proper landscape support before, I struggled a bit. So I'm sharing this as a reference for myself and others.
Table of Contents
1. Basics of landscape
The basic landscape setting is as follows:
@media (orientation: landscape) {
/* Write styles to be applied to devices in landscape orientation here */
}
2. Why does it affect PCs?
The landscape orientation is applied when the device's display area is wider than it is tall. As many PC displays fall under this definition, it also affects PCs.
3. iPhone Pro Max landscape settings
Since the width of the iPhone Pro Max is 428 pixels, we will set the max-height to 450px for compatibility.
@media (orientation: landscape) and (max-height: 450px) {
/* Write styles to be applied to devices in landscape orientation here */
}
4. An example
Below is a sample using this method, which only applies to smartphones in landscape orientation.
@media (orientation: landscape) and (max-height: 450px) {
body {
background-color: #f0f0f0;
}
.landscape-text {
font-size: 20px;
}
}
5. Conclusion
When you need to support landscape mode on smartphones, don't forget to set max-height: 450px. This will allow you to use landscape without affecting PC screens. Try implementing landscape support effectively with this method!
If you found this article helpful, please like and share!
Top comments (1)
This is a useful case to consider when building websites, thanks for sharing!