'Blazor server not scaling (zoomed) on mobile
I made a small sensor application in Blazor server.
However, when I view the app on my phone, it shows these scrolling bars (I always need to pinch/zoom out my page to make the scrolling bars disappear and show the app like it should).
It looks like the app is zoomed in at all times when I reload, even tho I set the viewport in _hosts file (<meta name="viewport" content="width=device-width, initial-scale=1.0"> ).
Do not know if this is relevant information, but I'm also using MudBlazor in the frontend.
It makes the app unusable and unpleasant to consult because half of my dashboard is not visible.
Any ideas to what the problem could be? Thanks.
Solution 1:[1]
It doesn't matter what framework you're using. At the end of the day, it all renders with either inline styles or CSS rules. If you want something to shrink with the window, then either the item or one of its parents needs its size to be set in relation to the window.
By default, Blazor has Bootstrap built in, which has a pretty good grid system that you can use for scaling. I don't use third party plugins, but as @Mehmet says, the first thing you should do is either Google or check YouTube for tutorials on how to format items in MudBlazor.
Try: https://www.youtube.com/results?search_query=mudblazor+layout
Solution 2:[2]
You should wrap your container inside a layout container like MudContainer, MudStack or MudGrid. These components helps you with the responsive design with no or little CSS.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Bennyboy1973 |
| Solution 2 | Mehmet Can Karagöz |