Best way to check scaling for multiple devices accurately when building websites

I am looking to create websites for businesses in the near foreseeable future and definitely the hardest part of it is scaling accurately to multiple devices.

To do this I use dev tools on chrome and firefox (f12) and then picking different devices which have different viewports and making sure everything looks fine on all.

A problem I have run into is that the site I built for myself looks great on 'iphone x' in dev tools, although when I looked at the site on a friends iphone x, there was a picture overlapping another picture which didn't show on dev tools. I was looking at it through safari browser, not chrome on his phone. As a note, the site looks great on chrome on my Samsung Note 9.

Would it be an issue with using some css properties that aren't available on safari? Or is this a common issue with dev tools and there's a better way to do it? I would like to know if there are better tools to use or even what methods people use to quicken up the device scaling process and/or get the websites looking more accurately on multiple devices/browsers.

Thanks in advance!