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.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0