I have created a unique markup using the same media queries you provided, but with different background colors to demonstrate their functionality. The CSS code below will indicate which screen size corresponds to each color:
/* Any screen not classified as mobile will have a green background */
body {
background: green;
}
h1 {
font-size: 4.286em;
margin-bottom: 24px;
width: auto;
text-align: center;
color: #fff;
}
/* Devices in portrait mode with dimensions within a specified range will have a red background */
@media only screen and (min-device-width: 240px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
body {
background: red;
}
h1 {
font-size: 4.286em;
margin-bottom: 24px;
width: auto;
text-align: center;
}
}
/* Devices in landscape mode with dimensions within a specified range will have a purple background */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
body {
background: purple;
}
h1 {
font-size: 4.286em;
margin-bottom: 24px;
width: auto;
text-align: center;
}
}
The HTML content used for this demonstration:
<h1>This Is a Heading Tag</h1>
Please note that some adjustments may be necessary based on the specific dimensions of devices. For example, certain phones have larger screens than those used in this test. It is recommended to test across various devices to ensure compatibility.
To emulate the different screen sizes, open Chrome and access the developer tools by pressing F12. Once the console opens, locate the phone icon at the top left corner and select it. From the dropdown menu, choose a device and enable the checkbox next to it to view the variations in landscape mode mentioned earlier.
If you require further assistance, feel free to reach out. You can find an updated version of your code hosted here.
Overall, this styling should display green backgrounds for non-mobile devices and switch to red for iPhone 4 and purple for other specific dimensions. Adjustments may be needed to match your target devices accurately, but I'm available to assist if required.
Best of luck!