Functionality:
An essential aspect of the web app is its compatibility with all mobile web browsers. This requires the development to be responsive and work seamlessly on various platforms.
Steps taken so far:
I have made adjustments to the CSS, along with adding
<meta name="viewport" author ="Luke" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">Current Issue:
Upon testing, the web app displays perfectly on Google Chrome but has a minor zooming problem that requires users to adjust. The real issue arises when viewed on other browsers such as iOS Safari, Firefox, Android's native web application, and even IE.
The problem manifests as excessive white space at the bottom and right edges of the screen in these browsers, indicating an inconsistency in display alignment.
Hence, I am seeking guidance on how to make the viewport settings more universally compatible across different browsers or if there are alternative solutions?
#my-memory-game {
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
body,
html {
height: 1920px;
width: 1080px;
padding: 0;
margin: 0;
overflow: hidden;
}<meta name="viewport" author="ErnestLee" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">