When I inherited the maintenance of a website, I discovered that it was not optimized for mobile devices. The client requested that the site be made accessible on mobile devices, so I attempted to ensure that the mobile version mirrored the desktop version, allowing users to zoom in and out as needed. Despite making adjustments through media queries, the desired outcome has not been achieved yet.
While the site looks satisfactory with
<meta name="viewport" content="user-scalable=yes" />width=device-width in the meta tag causes the site to display at a zoom level of 300%. Implementing initial-scale=1.0, maximum-scale=1.0, or minimum-scale=1.0 results in the same issue as when using width=device-width.
Currently, the closest I have come to the desired outcome is using user-scalable=yes in the meta tag without any additional parameters. However, this approach also means that the media queries do not take effect. Is it mandatory to include width=device-width or initial-scale in order for media queries to work?
One media query that I am struggling with is:
@media only screen and (max-width: 879px) {}