我如何让我的网络应用程序只对智能手机用户可用答案

【问题标题】：How i make my web application only available to smartphone user我如何让我的网络应用程序只对智能手机用户可用
【发布时间】：2021-04-20 00:57:20
【问题描述】：

您好，我正在开发一个投票网络应用程序，我希望选民只能从手机投票，当他们从电脑访问告诉他们只能从手机投票时，我有什么办法可以做到这一点？我没有尝试任何方法，因为我找不到。所以请帮忙

【问题讨论】：

标签： javascript reactjs web-applications

【解决方案1】：

使用媒体查询：

@media only screen and (max-width: 600px) {
  .block {
    display:flex;
  }
}
.block{
  display:none;
  justify-content:center;
  align-content:center;
}

<div class="block">
  This site is only available on mobile
</div>

【讨论】：

【解决方案2】：

您可以使用 JavaScript 来检查用户代理，然后使用它来更改 html。

if(
    navigator
    .userAgent
    .toLowerCase()
    .includes("mobi")
)
//Etc

您也可以将其与media 技术结合使用：

@media only screen and (max-width: 613px) {
  #yolo {
    display:none
  }
}

html 中的某处：

<div id="yolo"></div>

然后回到 JavaScript，你可以添加一个额外的条件：

/*... Other part of if...*/
&& window.getComputedStyle?

(
    cs=>
    cs && cs
    .getPropertyValue("display") 
     == "none"
)
(
    getComputedStyle(yolo)
)
: true
/*Rest of it statement closing & other things...*/

【讨论】：

用户代理检测不是现代网络应用的推荐技术
@spectric 说谁？那它为什么存在呢？
用户代理嗅探是一种非常笨拙的检测技术，用户代理字符串是一个不断移动的目标，不应单独信任它们。
@spectric 说谁？如果不检查，为什么还会存在？
仅仅因为某些东西存在并不意味着使用它是一个好主意。 Spectric 的观点是，如果您要检查的用户代理在您所针对的浏览器的较新版本中发生了变化，那么您的代码将不再有效。建议寻找更一致的解决方案有什么问题？