Currently, I am conducting testing on my website across various mobile devices. So far, the site functions perfectly on iOS devices but encounters issues when viewed on Android devices - it appears zoomed in and fails to be responsive.
Within the <head> tag of my website, the meta viewport is set as follows:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Furthermore, in the CSS code, specific styles are applied based on screen width. For example:
@media only screen and (min-width: 979px) {
.isStuck {
background-color: #000;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
}
@media only screen and (max-width: 979px) {
#stuck_container {
position: relative !important;
box-shadow: none;
}
.pseudoStickyBlock {
height: 0 !important;
}
}