Image zoomed on phone screen after deployment

Question

I have an issue with the display of my picture as the background of my home page. On big screen everything the picture is displayed properly and on small screen using the device mode of chrome dev tools.

https://i.stack.imgur.com/eAd0p.png

https://i.stack.imgur.com/CQRJH.jpg

But after deploying my site the home page picture looks like this on an actual phone:

https://i.stack.imgur.com/ixzYo.jpg

the background-position is right (bg-[37%]) but as you can see it is zoomed.

Here is my code.

<template>
    <div class="h-screen bg-cover bg-fixed bg-[37%]" 
    style="background-image:url('../assets/garden/HomePic.jpeg');">
    </div>

        <section class="py-20 w-1/2 mx-auto border-b-2 border-gray-200">
            <p class="md:text-center whitespace-pre-line ">
            Summer house rental “Ancienne école” in RUSTREL (in the Provence, France).
            The Summer rental “ancienne école” is the former elementary school
            of the little village called RUSTREL in the Luberon Region that is part of the Provence.
            It has been lovingly renovated and sleeps up to 8 people, offering all of the comfort you might wish for.
            </p>
        </section>

</template>

What can I do to fix that?