我看到的每个地方，人们总是说远离UA嗅探，甚至JQuery放弃了这个功能......
那么世界上视口检测如何填补平板电脑与手机之间的差距（因为新型号的分辨率重叠）？
任何人都可以解释视口检测是如何进行的......
答案 0 :(得分：2)
根据您的评论，您真正想要做的是设置
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0">
在你的<head>中，它会强制页面以设备的宽度呈现（或者在该设备上显示单个浏览器的宽度，如果你有，请说安装在Android上的Opera + Chrome + Android +等，这将是无论如何都可能是相同的视口。
对于大多数10英寸平板电脑，视口 是设备的分辨率 对于大多数手机，视口宽度（纵向）为320px - 360px。
所以尽管Galaxy S4和Note 3可能是1920x1080，但是当启用视口时它们真的是640x360（其中每个CSS像素都有9 [3x3]屏幕像素值的“子像素”抗锯齿应用，以及在屏幕像素的全分辨率下呈现字体/图像的位置[CSS宽度/高度的200x100图像实际上可能是600x300图像]）。
而不是3：1，“retina”iDevices具有2：1视口DPPX（每像素点数）。
其他Androids / BBs /浏览器具有不可思议的，可能是分数的DPPX（因此也应该避免在相等测试中依赖基于Int的DPPX）。
然后，您可以使用document.body.getBoundingClientRect().width在JS中进行测试，假设您的正文和布局在CSS中设置得恰当。
如果您还没有这样做，那么您的响应式设计可能比广告看起来太大或太小都要担心。
就UA嗅探而言，偶尔有效 也就是说，当您从服务器端语言中嗅探UA时，它对于手机/平板电脑的所有已知UA数据库进行嗅探，然后预先构建带有内置CSS / JS的HTML页面并进行预优化该模型的图像......
然而，这并没有嗅探UA字符串的特定部分，即搜索每个UA字符串以获得完全匹配，并构建该设备的规范。
这里的推理很简单：
在没有标准方法来定义设备+浏览器的每个方面时，您如何在UA中区分所有Android手机，所有Android平板电脑以及在Android平台上运行的所有其他“杂项”设备？
你可能知道iPhone和iPad之间的区别，但是你怎么知道普通的6“台湾手机和普通的7”台湾平板电脑之间的区别？
我认为有效的UA嗅探的一个实例是Android 2.2中.toDataURL()的{{1}}方法，它在技术上已添加（您可以检测到它），但从未实现过（它只返回空白数据，因为函数从未真正写过）。
修改 的
canvas不希望允许横向移动电话移动到其他布局，然后将其增加到640像素，或者向// my-widget.scss
// assuming a 1920x1080 phone (Samsung S4, Note 3 / Google Nexus 5 / HTC One)
// assuming 1920x1080 is max tablet size (with portrait width 1080)
// assuming that larger than 1080 is desktop
.my-widget {
// default experience
background-color : grey;
color : black;
font-size : 1rem;
// 1080px phone
@media screen and (max-width : 360px) {
font-size : 2rem;
background-color : white;
color : black;
}
// tablets up to 1080px, or phones in landscape-mode
// (or really-really big phones... none in North America, that I know of)
@media screen and (min-width : 361px) and (max-width : 1080px) {
background-color : black;
color : white;
}
}
规则添加方向检查。
实际上，您不应该针对设备限制。您应该做的是针对内容限制。
将小部件分成三列或四列是有意义的，哪里有意义（在什么像素/ em宽度处）使所有内容分解为单列模式，因为您的体验会中断否则。
但重点是，通过视口设置，您现在可以为三星Galaxy Gear，Nintendo 3DS等提供超小体验......对手机的小体验，对iPad的中等体验和7“ / 8英寸平板电脑，大尺寸平板电脑的大中型体验，桌面/电视体验，以及拥有多台显示器或Nexus 10或4k电视等人的愚蠢体验。
这一切都没有额外的嗅探...... 只是一点策划，以及一些媒体查询 您可以根据需要添加任意数量的断点。
哎呀，知道iPhone是320px，你可以专门为像iPhone这样大小的东西提供体验，然后为321到480（或640）的通用移动设备提供服务，或者只做一个响应式网格流从320px到768px（iPad宽度）的方式，并有你的“小”，并提供更大的桌面...
天空是极限 你只需要知道你关心的断点。