Ionic Angular Capacitor : OpenLayers map is blurry when app is running on device

Ionic Framework Ionic Angular
1

I am trying to display a map in my Ionic 7.2 Angular app with OpenLayers 10.1.0 with the following code :

ngAfterViewInit() {
      this.map = new Map({
        target: "map",
        pixelRatio: 1,
        layers: [new TileLayer({
            source: new OSM(),
          })
        ],
        view: new View({
          constrainResolution: true,
          center: fromLonLat([this.viewLongitude, this.viewLatitude]),
          zoom: 5
        })
      });
    }

At first, when I run ionic serve, the map was blurry which is why I added pixelRation: 1 and constrainResolution: true. Thanks to this, the map isn’t blurry anymore in the browser when I run ionic serve.

Nevertheless, the map is still blurry when I run it on an Android device.

Even if I run ionic capacitor run android -l --external and I check it in my device browser, the map is blurry while it is not on the computer browser. I have the feeling that’s have to do with the viewport meta, but I’m stuck… Anyone who experienced the same issue ?

Thanks for your help !