捕捉移动 css 媒体查询的最佳方式
Best way to catch mobile css media query
我是响应式新手 css。我已经了解了很多关于媒体查询的知识，但我仍然没有弄清楚哪种方法是捕捉用户是否使用手机的最佳方式。
识别移动用户的媒体查询使用设备宽度，但设置断点的最佳值是什么？
当我的 android 智能手机与 Google chrome 一起使用时，页面的宽度约为 400px，即使真正的分辨率是全高清，1080px 宽度。这取决于浏览器的形式，还是什么？我看到有人用em mesure设置断点，这样更准确吗？我也想进一步了解手持设备 属性。
最后，在阅读了很多不同的信息之后，您能告诉我哪种是最有效的方式吗？如果客户端是移动的，最好的媒体查询？谢谢。
The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?
关于如何处理这个问题有一些理论。有些人去寻找最流行的设备宽度并在那些地方设置断点。如果您确切知道您网站上的大多数用户使用什么，那就太好了。但是，缺点是您必须将设计塑造成这些宽度，并且随着新设备的出现，您必须不断更新代码。
所以你的断点应该是这样的：
// iPhone 6
@media only screen and (min-device-width : 375px) {
// styles go here
}
// iPhone 6+
@media only screen and (min-device-width : 414px) {
// styles go here
}
另一种理论是无论设备是什么，都可以使其在任何尺寸下都完全可扩展。这样做的好处是您可以确保您的设计在所有设备上看起来都很棒。缺点是它会让你的代码有点臃肿。这里的断点将在您需要的任何地方。我个人使用此方法，但从 1200 处的断点开始，然后根据需要转到 1100、1000。如果我首先使用移动设备，我将从 320、350、400、500 等开始...
When using my android smartphone with Google chrome, the width of the
page is about 400px, even thought the real resolution is full hd,
1080px width. Does this depends form the browser, or what?
设备宽度有很多因素。但设备宽度基本上是浏览器显示的像素数。还有比这更多的东西，但最好的选择是 Google 设备宽度。
I saw that someone uses the em mesure to set the breakpoint, is this
more accurate?
没有。它只是一种从父元素细分的方式。在您有更多时间对此进行研究之前，请坚持使用像素。
Finally, after having read lots of different informations, can you
please tell me which is the moste effective way, the best media query
to catch if the client is mobile or not? Thank you.
最好的方法是确定你的断点。您不能使用 CSS 专门针对移动浏览器。您只能定位那些浏览器的属性（宽度、高度、方向），这样您就可以知道 iPhone6 的纵向宽度为 375 像素。因此，您可以使用该宽度定位它们。正如 Allan 所说，您可以使用 Javascript 或服务器端库来定位设备，并以这种方式添加 类。但 IMO 最好坚持使用设备宽度并保存这些宽度以备不时之需。
我是响应式新手 css。我已经了解了很多关于媒体查询的知识，但我仍然没有弄清楚哪种方法是捕捉用户是否使用手机的最佳方式。 识别移动用户的媒体查询使用设备宽度，但设置断点的最佳值是什么？ 当我的 android 智能手机与 Google chrome 一起使用时，页面的宽度约为 400px，即使真正的分辨率是全高清，1080px 宽度。这取决于浏览器的形式，还是什么？我看到有人用em mesure设置断点，这样更准确吗？我也想进一步了解手持设备 属性。 最后，在阅读了很多不同的信息之后，您能告诉我哪种是最有效的方式吗？如果客户端是移动的，最好的媒体查询？谢谢。
The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?
关于如何处理这个问题有一些理论。有些人去寻找最流行的设备宽度并在那些地方设置断点。如果您确切知道您网站上的大多数用户使用什么，那就太好了。但是，缺点是您必须将设计塑造成这些宽度，并且随着新设备的出现，您必须不断更新代码。
所以你的断点应该是这样的：
// iPhone 6
@media only screen and (min-device-width : 375px) {
// styles go here
}
// iPhone 6+
@media only screen and (min-device-width : 414px) {
// styles go here
}
另一种理论是无论设备是什么，都可以使其在任何尺寸下都完全可扩展。这样做的好处是您可以确保您的设计在所有设备上看起来都很棒。缺点是它会让你的代码有点臃肿。这里的断点将在您需要的任何地方。我个人使用此方法，但从 1200 处的断点开始，然后根据需要转到 1100、1000。如果我首先使用移动设备，我将从 320、350、400、500 等开始...
When using my android smartphone with Google chrome, the width of the page is about 400px, even thought the real resolution is full hd, 1080px width. Does this depends form the browser, or what?
设备宽度有很多因素。但设备宽度基本上是浏览器显示的像素数。还有比这更多的东西，但最好的选择是 Google 设备宽度。
I saw that someone uses the em mesure to set the breakpoint, is this more accurate?
没有。它只是一种从父元素细分的方式。在您有更多时间对此进行研究之前，请坚持使用像素。
Finally, after having read lots of different informations, can you please tell me which is the moste effective way, the best media query to catch if the client is mobile or not? Thank you.
最好的方法是确定你的断点。您不能使用 CSS 专门针对移动浏览器。您只能定位那些浏览器的属性（宽度、高度、方向），这样您就可以知道 iPhone6 的纵向宽度为 375 像素。因此，您可以使用该宽度定位它们。正如 Allan 所说，您可以使用 Javascript 或服务器端库来定位设备，并以这种方式添加 类。但 IMO 最好坚持使用设备宽度并保存这些宽度以备不时之需。