Javascript 判断客户端-渲染不同文字内容

2015-11-04 | 前端

我要实现这样的一个效果：在响应式页面的时候，在手机显示的时候，要有文字显示“长按关注”，在pc上面显示文字为“请扫描关注”，能否适应不同屏幕，渲染不同文字的内容。

需要做两个方面的考虑：1.判断客户端类型main.js

var client = {
  versions: function() {
    var u = navigator.userAgent;
    return {
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端  
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器  
    }
  }
} 
//get value 
var btnvalue = document.getElementById('btn').innerText;
var btnvalue = document.getElementById('btn2').innerText;
var btnvalue = document.getElementById('btn3').innerText;
var btnvalue = document.getElementById('btn4').innerText;
var btnvalue = document.getElementById('btn5').innerText;
var btnvalue = document.getElementById('btn6').innerText;
var btnvalue = document.getElementById('btn7').innerText;
var btnvalue = document.getElementById('btn8').innerText;
console.log(btnvalue);
if (client.versions.ios) {
  console.log("ios");
  document.getElementById('btn').innerHTML = '长按关注';
  document.getElementById('btn2').innerHTML = '长按关注';
  document.getElementById('btn3').innerHTML = '长按关注';
  document.getElementById('btn4').innerHTML = '长按关注';
  document.getElementById('btn5').innerHTML = '长按关注';
  document.getElementById('btn6').innerHTML = '长按关注';
  document.getElementById('btn7').innerHTML = '长按关注';
  document.getElementById('btn8').innerHTML = '长按关注';
} else if (client.versions.android) {
  console.log("andriod");
  document.getElementById('btn').innerHTML = '长按关注';
  document.getElementById('btn2').innerHTML = '长按关注';
  document.getElementById('btn3').innerHTML = '长按关注';
  document.getElementById('btn4').innerHTML = '长按关注';
  document.getElementById('btn5').innerHTML = '长按关注';
  document.getElementById('btn6').innerHTML = '长按关注';
  document.getElementById('btn7').innerHTML = '长按关注';
  document.getElementById('btn8').innerHTML = '长按关注';
} else {
  document.getElementById('btn').innerHTML = '请扫描关注';
  document.getElementById('btn2').innerHTML = '请扫描关注';
  document.getElementById('btn3').innerHTML = '请扫描关注';
  document.getElementById('btn4').innerHTML = '请扫描关注';
  document.getElementById('btn5').innerHTML = '请扫描关注';
  document.getElementById('btn6').innerHTML = '请扫描关注';
  document.getElementById('btn7').innerHTML = '请扫描关注';
  document.getElementById('btn8').innerHTML = '请扫描关注';
  console.log("不是移动设备");
}

2.显示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
                    <!-- 显示信息 --> 
        <button id="btn"></button><br />
        <button id="btn2"></button><br />
        <button id="btn3"></button><br />
        <button id="btn4"></button><br />
        <button id="btn5"></button><br />
        <button id="btn6"></button><br />
        <button id="btn7"></button><br />
        <button id="btn8"></button>     
</body>
</html>