I have developed a responsive website using CSS with media queries. Upon testing it on various devices, I noticed an issue with the iPad split screen feature. When the screen is split with a ratio of 3:1 and my website is opened in the smaller area, it displays the larger media query designed for iPads rather than the window size. Interestingly, the same issue does not occur on iPhones where it appears correctly in the smaller split-screen.
Below is an example of the code structure:
@media only screen and (min-device-width: 1100px) {
#icons {
width: 1024px;
}
}
@media only screen and (max-device-width: 797px) {
html,
body {
min-width: 150px;
}
}
@media only screen and (max-device-width: 730px) and (min-device-width: 450px) {
.icons {
margin-left: 12%;
}
}
@media only screen and (max-device-width: 450px) and (min-device-width: 390px) {
.icons {
margin-left: 15%;
width: 14%;
}
}
@media only screen and (max-device-width: 390px) and (min-device-width: 291px) {
.icons {
margin-left: 9%;
width: 23%;
}
}