Html 媒体查询在实际iPhone设备/模拟器上不起作用

我有一个问题，有一个角度的网站与填充，只出现在移动Safari。我正试图通过媒体提问来解决这个问题，但到目前为止，这些问题都没有产生效果。我正在用iPhone11运行iOS模拟器。我试过：

@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：812px）
和（-webkit最小设备像素比：3）
和（方向：纵向）

@仅媒体屏幕
和（设备宽度：414px）
和（设备高度：896px）
和（-webkit设备像素比：2）

@仅媒体屏幕
和（最小宽度：375px）
和（最大宽度：767px）

我从各种各样的iphone11搜索中得到了这些。模拟器不应用更改。我还将其包含在index.html中：

这就是MobileSafari上的问题，元素从顶部剪掉

有趣的是，在chromedevtools的iPhone布局上，它确实正确地应用了样式。问题在于，Chrome上没有出现此问题，因此它最终会过度应用填充，如图所示：

因此，基于此，我认为查询的应用是正确的，但mobile Safari不接受这些查询。我不确定我错过了什么。提前感谢您的帮助

编辑： 最近使用

min width

而不是

min device width

的attepmt仍不起作用

@仅媒体屏幕
和（最小宽度：375px）
和（最大宽度：812px）
和（-webkit最小设备像素比：3）
（方向：肖像）

这个答案应该对@jaideep_johny有所帮助，所以我注意到了这一点，并尝试了使用和不使用设备标志的变体。没什么不同。我用最近的一次尝试更新了这个问题。@jaideep_johny。你还有其他建议吗？你可以使用css hack，它只适用于safari，虽然它只是一个补丁，所以不推荐使用，但它可以完成工作。这是链接嗨，我也面临同样的问题。你找到解决办法了吗？你能帮助我吗？