如何有效的判断手机端代理

mark一个遇到过的问题:

项目有个需求，需要根据不同的终端实现不同的效果展示。
网上大部分文章的分享：
const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
但是使用之后发现一个弊端：
部分手机代理解析不了，比如vivo，oppa，荣耀v9等等，这样就有局限性，手机越来越百花齐放，不能遇到一个手机型号，针对一个手机型号来更改代理识别，同时除非你拥有测试机，否则你也不清楚新的手机型号对应的navigation.userAgent是多少，这样局限性非常大。

问题深思：

手机端有没有一个标识来统一识别，而不会出现不同型号代理不同。

思维转换：

其实区分手机和pc端，无非是因为尺寸不同，要达到的效果不同。针对尺寸这方面做考虑，判断语法修改：
const isMobile = document.documentElement.clientWidth < 832
类似于响应式布局的思路：
@media screen and (min-width: 320px) and (max-width: 823px)

结语：

我的解决方案适用于当前需求，有的人可能会说，现在手机屏幕越来越大，如果超过832px的话怎么办，在我看来，如果手机真的做到大于832px，视为pc操作也没啥问题，这类手机已经不应该再划分到移动端的范畴。当然，你是阻止不了老板或是产品经理有奇葩的想法，具体问题具体分析，如果有更好的解决方案也欢迎留言指导，毕竟我主职也非前端，在前端这条路也只是个自学的菜鸟。