Implementing Landscape Mode for Smartphones: iPhone Pro Max Compatibility Without Affecting PC Displays

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
2. Why does it affect PCs?
3. iPhone Pro Max landscape settings
4. An example
5. Conclusion

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!

Comments

[Claire Parker-Jones]

This is a useful case to consider when building websites, thanks for sharing!