有时我们在希望访问的终端，仅限制在移动端访问，禁止PC端访问这样的需求，我简单可以使用JS来完成，主要是利用终端浏览器的 navigator.userAgent 属性来完成，因为这里含有终端的特性特征，根据这些特征从而判断是否为移动端，移动端目前根据操作系统和应用软件等主流的主要这些判断，移动操作系统方面有 iphone，ipad，android等三大主流移动OS（其它的省略，国内主要就这些，但注意这不是全部），软件的有微信 micromessenger 等（同样，软件国内微信较多，当然还有其它，这里不列出了），所以 iPhone 手机浏览的 userAgent 含有 iphone 特征，以 ipad 平板浏览的 userAgent 含有 ipad 特征，安卓手机浏览的userAgent 含有 android 特征，用微信软件内置浏览器访问的 userAgent 含有 micromessenger 特征，所以前端页面使用JS根据 userAgent 的这些特征就可以判断是否为移动端，从而进行页面的访问提示或控制转向等，满足自己的需求需要，下面简要以一个例子举例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<script type="text/javascript">
// 判断客户端类型,可以限制是否仅为移动端访问
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isApple = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
// 这里根据移动端浏览器的 navigator.userAgent 特性判断是否为移动端浏览
var isMoveClient = isWeixin || isAndroid || isApple;
if (!isMoveClient) {
//设置web页的title，meta和样式
var temp = '<title>抱歉，出错了</title><meta charset="utf-8">';
temp = temp + '<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">';
temp = temp + '<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
document.head.innerHTML = temp;
//设置页面显示的内容
temp = '<div class="weui_msg">';
temp = temp + '<div class="weui_icon_area">';
temp = temp + '<i class="weui_icon_info weui_icon_msg"></i></div>';
temp = temp + '<div class="weui_text_area">';
temp = temp + '<h4 class="weui_msg_title">请在微信客户端，安卓手机，苹果手机或iPad平板访问</h4></div></div>';
document.body.innerHTML = temp;
}
</script>
</body>
</html>
为您推荐
