JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<input type="number" id="number">
<div id="result"></div>

CSS

#result {
    margin:10px;
}

JavaScript

var check = {
    'Touch Event':("ontouchstart" in document.documentElement),
    'Window Orientation':('orientation' in window),
    'OrientationChange Event':('onorientationchange' in window),
    'screen width':screen.width,
    'inner width':window.innerWidth,
    'devicePixelRatio':window.devicePixelRatio
};


function deviceCheck(pixelratio){
   return ("ontouchstart" in document.documentElement)
        && ('orientation' in window)
        && ('onorientationchange' in window)
       && ( (pixelratio)? (window.devicePixelRatio > 1):true);
};


Object.each(check, function(v,k){
    new Element('p',{'text':k + ':' + v}).inject(document.body);
});


    new Element('p',{'text':'use smartphone?:' + deviceCheck()}).inject(document.body);

$('number').addEvent('change', function(){
$('result').set('html', 'number value = '+this.value);
});