As I delve into the realm of editing CSS created by others, I come across a peculiar situation involving media queries specifically designed for iPads. While one query is intended for portrait orientation and another for landscape, they are causing havoc on larger Android phones and phablets.
The oddity lies in the fact that the CSS being implemented comes highly recommended despite its vulnerability on Android devices.
The primary purpose of these queries is twofold:
- To utilize min-device-width and max-device-width to confirm the device is an iPad
- To determine whether the device is in portrait or landscape mode through the 'orientation' parameter
However, what becomes evident is how this specific CSS snippet poses issues:
/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}
/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}
The concern surfaces from defining a wide range between minimum and maximum device width, leading to these styles erroneously applying to various other devices falling within the specified pixel range. This results in discrepancies such as buttons extending beyond the screen boundaries on certain Android models due to slightly altered dimensions.
To address this issue, I have refined the media queries to precisely target all iPad models:
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { etc }
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { etc }
This revised approach ensures accurate targeting of iPads, recognizing their consistent "device-width" of 768 pixels regardless of varying resolutions.
While I am confident in this adjustment, considering the prevalence of similar challenges and prevailing recommendations towards using MIN-device-width and MIN-device-height, external input remains valuable in validating my approach.