JS限制移动端访问
有时我们在希望访问的终端,仅限制在移动端访问,禁止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>