Solution 1 :
<meta name="viewport" content="width=device-width, initial-scale=1">
Add the above code in the <head> tag.
I copied this code from GitHub website
Why does it work?
Most mobile screens have around full HD resolution.
This is the same as that of most computer monitors and laptop screens.
16px as the default font size of a paragraph. On a mobile screen, it will be too small.
Therefore, mobile browsers convert the rendered screen size.
For example, iPhone X converts screen size to 375px by 812px while the actual resolution is 1125×2436 pixels.
width=device-width sets the width of the HTML to the width offered by the browser (375px for iPhone X).
Generally, you will give the scaling factor as 1.
You can put the scaling factor yourself by giving initial-scale=0.8 and see if you like.
Problem :
I’ve been developing an application for mobile hand scanning devices using asp.net and C#. Up until last week this application has been on windows CE. Now the platform has been switched to Android. I’m having issues with the application looking very “zoomed out”(see picture). What could be causing this? I believe my CSS is correct, but I’m also not too familiar with how it behaves on an android platform.
I figure I’m doing something wrong with the CSS so I’m posting my CSS below as well.
@media only screen and (max-width : 320px) {
.contentDiv {
height:100%;
width:100%;
}
}
The page structure utilizes a site master file where the menu buttons are placed. I’m very new to developing on the android platform and I could really use some insight or help.
