CODEWITHSUNDEEP
blazorbootstrap-5mauiblazor-webassemblymaui-blazor
Yana R.
Yana R.

Reputation: 31

Default zoom on maui blazor application

I built a maui blazor application and I'm using Bootstrap 5.2. I'm using this application only on laptops (not on mobile or tablets). When I'm changing the display settings on windows to 125% or 150%, everything on my page is massed up. The viewport is relevant only for mobiles and not on windows desktop to the application. I can't find anything on the internet about how to configure a default zoom (for example: when the scale in the display settings is configured to 125%, the scale[or the zoom] of the application will always be 100% and all the components will fit on the screen) on maui blazor application. I tried to configure the zoom attribute on :root or on body properties of the page but not all the bootstrap components are fixed (for example: the popover and the tooltip). I thought about adding media queries but there are a lot of bootstrap components to handle. I'm really lost and, sadly, I can't share my code... Thanks for the help.

What I tried: I tried to find information on microsoft github maui / asp.net. I tried to add my own css with zoom that deepened on display.defaultdensity value to change the zoom based on the display settings (but the other bootstrap components are not fixed when I'm changing the scale or the zoom). I tried to trigger the wheel scroll event to scale the page depends on devicePixelRatio value. I tried to search on stackoverflow the problem and I can't find anything on maui blazor application.

Upvotes: 1

Views: 623

Answers (2)

Scott Kuhl
Scott Kuhl

Reputation: 1081

I ran into a similar issue getting the scaling right on Windows and Mac. Windows renders the site at the same scale you would see it in a browser, Mac renders the scale at 77% in MAUI because it is trying to behave like an iPad app. The solution to both our problems can be fixed like this:

In the index.html file add a script section to detect the platform you are running on and change the viewport size to the zoom level you want. For example, to change the viewport size on a Mac to render like a Mac instead of an iPad you scale it up:

<script>
    if (window.navigator.userAgent.indexOf("Macintosh") != -1) {
        var viewportmeta = document.querySelector('meta[name="viewport"]');
        if (viewportmeta) {
            viewportmeta.content = "width=device-width, initial-scale=1.2, maximum-scale=1.2, user-scalable=no, viewport-fit=cover";
        }
    }
</script>

I hope that helps. For anyone else landing here that is running in to the Mac scaling issue specifically you can also fix it like this:

In the Info.plist file under MacCatalyst you can change the UIDeviceFamily from 2 to 6.

This changes the way the web view scales its content, but it also means you are making a pretty serious change to the way MAUI will render all its controls on a Mac. If your app is just a web view and you are doing almost all your UI in Blazor Hybrid this will probably be fine.

Upvotes: 0

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14409

You can try to delete <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness> in the \Platforms\Windows\app.manifest. Such as:

<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
  <assemblyIdentity version="1.0.0.0" name="MauiApp3.WinUI.app"/>
      <application xmlns="urn:schemas-microsoft-com:asm.v3">
            <windowsSettings>
                  <!-- The combination of below two tags have the following effect:
           1) Per-Monitor for >= Windows 10 Anniversary Update
           2) System < Windows 10 Anniversary Update
      -->
                  <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
            </windowsSettings>
  </application>
</assembly>

The control in the windows will not mass up when I changed display settings on windows.

Upvotes: 0

Related Questions