I want to increase the resolution of an image displayed by Cloudinary

I am displaying an image stored on Cloudinary, shown below:

 <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3 mb-2">
    <advanced-image
      [cldImg]="img"
      [plugins]="plugins"
      class="ml-lg-3 mr-lg-3"
    ></advanced-image>
  </div>

and in the angular component

this.img = this.cld
    .image(`${this.displayImagePath}`)
    .roundCorners(byRadius(100))
    // .roundCorners(max())
    // .width(100)
    // .height(100)
    // .format('jpg')
    .delivery(quality(100));
    // .resize(thumbnail().width(1000).height(1000))
    // .resize(scale().width(1000))
    // .delivery(quality('auto:best'))
    // .delivery(format(auto()));
    // .format('auto')
    // .quality('auto:best');
  if (this.imageVersion) {
    this.img.setVersion(this.imageVersion);
  }

This all works well enough, and the image displays correctly (I am using a bootstrap grid system, and it generally displays as expected - nicely on a wide screen, and then on my mobile vertical - as I would expect from the col-xs specified.)

However on my mobile (just browsing using chrome - no app here), I might like to enlarge the image to checkout finer detail (using mobile screen finger movements - swipe/stretch etc..). However when I do this I quickly discover that the resolution is way down on the image actually stored on Cloudinary.

I don't really know what to ask for - I guess is zooming the screen on a mobile the same as changing the viewport on a browser on e.g. a laptop? Would you expect Cloudinary to modify the display based on changing zoom values?

I don't want the image to use up more "space" on the screen - i.e. its dimensions must remain the same. I just want the resolution (dpi) to be higher in this image that is displayed.

I have played with all settings (quality, format, resize, width, height) - but it seems as though this all gets overridden by Cloudinary as it self-determines a resolution for this display size?

Sorry if this sounds confusing - I would really appreciate it if someone might be able to enlighten me, or point me in a direction.

When you want to zoom, open a dialog, that loads the original image without optimization or with optimization for higher pixel density, the whole reason of optimization is to make the image visible with highest clarity but with least pixels and size. This gives the appearance of high quality but with the least size possible.

On mobile an image does not need much pixels (400x400), even if the original image is (1024x1024). But when zooming the pixels are important.