Javascript 响应性网页设计媒体查询点与像素

我已经用html、css和javascript创建了我的网站，并为iPhoneX设计了它。我的网站将以Instagram为目标，所以我的主要目标是所有类型的移动设备。我正在css中使用媒体查询，我想检查屏幕高度。我不确定，但对我来说，这听起来是个不错的方法，因为例如iPhone的屏幕宽度和屏幕高度相差不大

这是我在css中的方法：

@media only screen and (min-height: 481px) and (max-height:666px){*css*}

这应该是对iPhone5的一个查询，但我真的被点和像素搞糊涂了，所以我希望你们中的一些人能帮我解决这个问题

谷歌chrome显示iPhone5的屏幕尺寸为320x568。我猜这些应该是点，但我的媒体查询以像素为单位输入时效果很好，而iPhone5的屏幕大小（以像素为单位）应该是640x1136像素

我对iPhone5的媒体查询在谷歌Chrome iPhone5的“设置”中运行良好，但我在家里也测试了iPhone5，其中的响应性似乎根本不起作用

因此，在继续我的响应式设计之前，我想弄清楚这一点。。为什么会这样？谷歌浏览器是显示点还是像素？我应该在媒体查询中使用点还是像素？当我搜索屏幕尺寸时，css中的像素完全不同，为什么它可以处理这些像素

我仍然认为自己是初学者，所以我真的不喜欢太复杂的答案。

---

谢谢大家!

我总是浏览resizembrowser.com，它提供css像素（使用内部值）。这是一个一致的值。显然，你不应该只依赖于chrome，至少应该依赖safari和firefox。没有人能证明我的知识。@y我曾经尝试过你的网站，当我尝试iPhone4预设时，它告诉我“由于屏幕的可用宽度和高度不够，屏幕的大小调整为400 x 377，而不是640 x 960。”当我在MacBook上时，我的屏幕怎么会不够？要做的是不要在整个页面上都使用按钮。只需使用底部显示电流内部的读数。显然，如果你有这个选择，首先要最大化你的浏览器。我总是浏览resizembrowser.com，它给你css像素（使用内部值）。这是一个一致的值。显然，你不应该只依赖于chrome，至少应该依赖safari和firefox。没有人能证明我的知识。@y我曾经尝试过你的网站，当我尝试iPhone4预设时，它告诉我“由于屏幕的可用宽度和高度不够，屏幕的大小调整为400 x 377，而不是640 x 960。”当我在MacBook上时，我的屏幕怎么会不够？要做的是不要在整个页面上都使用按钮。只需使用底部显示电流内部的读数。显然，如果你有选择的话，首先要最大化你的浏览器。