网页宽高测试

源码如下
<!doctype html>
        p.innerHTML = o.toString ? o.toString() : o;
        el.appendChild(p);
    }

    function outputData() {
        var el = document.getElementById('log');
        el.innerHTML = '';
        log('screen.width: ' + screen.width);
  log('screen.height: ' + screen.height);
        log('window.outerWidth: ' + window.outerWidth);
  log('window.outerHeight: ' + window.outerHeight);
        log('window.innerWidth: ' + window.innerWidth);
  log('window.innerHeight: ' + window.innerHeight);
        log('document.documentElement.clientWidth: ' + 
                document.documentElement.clientWidth);
  log('document.documentElement.clientHeight: ' + 
                document.documentElement.clientHeight);

        var box = document.getElementById('box');
        log('div#box width: ' + box.offsetWidth);

        log('window.devicePixelRatio: ' + window.devicePixelRatio);
    }
    outputData();

    var refresh = document.getElementById('refresh');
    refresh.onclick = outputData;
</script>
pc效果
iPhoneX效果
文章目录
