Javascript 视口检测如何区分平板电脑和手机？

无论我在哪里看到，人们总是说远离UA嗅探，甚至JQuery也放弃了这个功能

那么，视口检测究竟是如何填补平板电脑与手机之间的这一差距的呢（因为较新型号的分辨率重叠）

---

有人能解释一下视口检测是如何进行的吗…

根据您的评论，您真正想做的是设置

<meta name="viewport"
      content="width=device-width,
               initial-scale=1.0,
               minimum-scale=1.0">

不希望横向移动中的手机移动到不同的布局，然后将其增加到640px，或者在

@media

规则中添加方向检查

实际上，您不应该针对设备限制。您应该做的是针对内容限制

你的小部件流到三列或四列中有什么意义？如果你的体验不是这样，那么将所有内容分解为单列模式（像素/em宽度）又有什么意义

但关键是，通过视口设置，您现在可以为三星Galaxy Gear、任天堂3DS等提供超小型体验。。。对手机来说是一种小型体验，对iPad和7“/8”平板电脑来说是一种中型体验，对全尺寸平板电脑来说是一种更大的中型体验，一种台式机/电视体验，而对拥有多个显示器或Nexus 10或4k电视的人来说则是一种愚蠢的巨大体验，等等

这一切都不需要额外的嗅探……
只是一点计划和一些媒体查询。
您可以添加任意多或任意少的断点

见鬼，知道iPhone是320px，你可以专门为大小与iPhone一模一样的东西提供体验，然后提供从321到480（或640）的通用移动设备，或者只需制作一个响应网格流，从320px到768px（iPad宽度），然后让它成为你的“小”设备，并将所有更大的设备作为桌面服务

天空是极限。

---

你只需要知道你关心的断点是什么。

不同的是视口大小，而不是功能检测。但这正是问题所在，视口大小越来越相互重叠，使用较新的手机型号回答很好，我意识到欺骗和未知设备的问题，但我不担心欺骗和未知的模型。。。每个网站设计师在维护自己的网站时都有其局限性…@user3160134当然有局限性。在我的个人项目中，只有我。在工作中，可能会有更多的人，但也会有更多的项目。但是，如果您计划提供一个响应/适应桌面+平板电脑+phablet+手机+微型设备的HTML页面，那么通过指定视口来创建网站是目前的一项基本要求。您正在将维护工作完全转移到CSS领域，但如果您有使用AngularJS之类的工具的好处（或者可以编写小型的、重点突出的模板部分），并且有一个良好的构建过程+SASS/LESS，那么它会变得更容易。@user3160134它还具有作为一个超级通用解决方案的好处。通用UA嗅探在Android领域带来了大量的“OOP”，平板电脑在Android领域获得了移动治疗——这些也不仅仅是名不副实的体验（尽管我希望它们正在变得更好）。或者，特定于视口的布局将设备绑定到设备（+浏览器）供应商的能力。如果供应商认为该设备应具有2.057:1 DPPX，那么CSS将提供此功能，而无需您进行额外的工作。我明白了，您能否向我展示一段代码片段，说明如何区分平板电脑和手机（在SASS中）？非常感谢，谢谢you@user3160134没那么难。如果您有一个1920x1080 10英寸平板电脑和一个1920x1080三星Note 3，并且您已经设置了META-VIEWPORT标记，那么

@媒体屏幕和（最大宽度：360px）{/*手机*/}

和

@媒体屏幕和（最小宽度：1080px）{/*平板电脑或桌面--也设置一个最大宽度，以服务于此*/}之上的桌面特定版本

可以正常工作。

我的小部件{@media…360px{color:blue；}@media…1080px{color:red；}}

完成了。

// 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;
    }
}