Small sized apps have really low resolution and blurry UIs

Good afternoon
The weggl app I'm making requires that the user be able to resize it but I'm having a problem where the images and especially the text does not resize well. Depending on the type of filtering I give the sprites they either get too transparent and blurry (bilinear filtering) or too blocky and blurry (point filter). Adding mipmaps also has really unintended results like they become greyscale and transparent. This all works fine in the editor but it's in the browser that these issues occur.

You can see the results on the screens below. The middle image is the initial size. Text is readable but incredibly blurry. App can be resized betweent the bigger one and the smaller one and the smaller size is also the initial size in phones and it not even legible. The big one has the best results but even nothing is sharp.



I'm at the end of my rope. I've tried with unity canvas with really huge, unity canvas with small resolution. everything is pretty much the same. I'm thinking of putting all the ui in javascript but really hope I don't have to.

On the html from i'm resizing by manipulating both the width and height properties of the canvas element and by changing the width and height of the the style properties.
I've tried using a bigger font size in the font settings as described in many posts on how to get crisper text on ui.

Is there anyone that can help with this?