Wurlf:<br>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<!---<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <li class="is-mobile">Mobile: <span class="wurfl-data"></span>.</li>
    <li class="form-factor">Form factor: <span class="wurfl-data"></span>.</li>
    <li class="device-name">Device: <span class="wurfl-data"></span>.</li>
  </ul>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//wurfl.io/wurfl.js'></script>
<script>
console.log(WURFL);
$('.is-mobile .wurfl-data').html( '' + WURFL.is_mobile + '' );
$('.form-factor .wurfl-data').html( WURFL.form_factor + '' );
$('.device-name .wurfl-data').html( WURFL.complete_device_name + '' );
</script>


<br>======JS=======<br>

Quick:<br>
  <meta charset="UTF-8">
<div class="container"><span class="user-agent"></span></div>
<script>
var userAgent = window.navigator.userAgent;
if (userAgent) {
  var span = document.querySelector('.user-agent');
  span.innerHTML = userAgent;
}
</script>


<br>Concise:<br>
<div class="container">Device: <span class="user-agentt"></span></div>
<script>
var userAgent = window.navigator.userAgent;
if (userAgent) {
  var span = document.querySelector('.user-agentt');
  var openingParenIndex = userAgent.indexOf('(');
  var closingParenIndex = userAgent.indexOf(')');
  if (openingParenIndex !== -1 && closingParenIndex !== -1) {
    var extractedString = userAgent.substring(openingParenIndex, closingParenIndex + 1);
    span.innerHTML = extractedString;
  }
}
</script>