How can I inspect element in an iPhone X's browser?

Question

I have a CSS bug (visual difference) that seems to happen only in iPhone X devices.

what I would usually do in cases like these is use the inspector tool in the browser the bug occurs to find the rule I wrote that is not cross browser, and do a trial and error in the inspector tool until I find what works cross browser and cross platform.

knowing that iPhone uses safari browser - I installed safari on my windows PC but couldn't reproduce the bug.

how can I simulate a browser in a iPhone on my windows PC? or is there another way to find the quirk in this case in order to fix it?

I can't afford a mac. I have windows 10 on my PC but can also use a linux distribution if needed. also, this cannot be debugged in a cloud because the security team won't allow the code to be hosted on an external cloud at the stage of development.

Answer 1

As far as I know, your best/cheapest approach would be to run MacOS within a Virtual Machine and then perform the steps Neal suggested.

But keep in mind that you need to run the network config of your Virtual Machine in "Bridge Mode" otherwise your virtual macos can't see any devices on your network.