zui/src/js/debug.js

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/* ========================================================================
 * ZUI: debug.js
 * http://zui.sexy
 * ========================================================================
 * Copyright (c) 2014-2016 cnezsoft.com; Licensed MIT
 * ======================================================================== */

(function($, window, document) {
    'use strict';
    $(function() {
        $('body').append('<style>#zuiDebug{display:none; position: fixed;left: 2%;top: 30%;}#zuiDebug .icon{width: 180px;height: 180px;padding: 20px;border-radius: 100px;background-color: #333;color: #fff;transition:all 0.4s;}#zuiDebug .icon.visible-xs{background-color: #39B3D7;}#zuiDebug .icon.visible-sm{background-color: #47A447;}#zuiDebug .icon.visible-md{background-color: #ED9C28;}#zuiDebug .icon.visible-lg{background-color: #D2322D;}#zuiDebug .icon:hover{opacity: 0.01;}#zuiDebug .icon > i{display: block;font-size: 60px;}#zuiDebug .icon small{display: inline-block;height: 24px;opacity: 0.7;font-size: 12px;background-color: rgba(0,0,0,0.5);border-radius:12px; line-height: 24px;margin-top: 10px;padding: 0 10px;}</style><div id="zuiDebug"><div class="icon text-center visible-xs"><i class="icon-mobile-phone"></i><strong>Phone</strong><div class="text-center"><small>XS <span class="screen-size"></span></small></div></div><div class="icon text-center visible-sm"><i class="icon-tablet"></i><strong>Tablet</strong><div class="text-center"><small>SM <span class="screen-size"></span></small></div></div><div class="icon text-center visible-md"><i class="icon-desktop"></i><strong>Desktop</strong><div class="text-center"><small>MD <span class="screen-size"></span></small></div></div><div class="icon text-center visible-lg"><i class="icon-desktop"></i><strong>Widescreen</strong><div class="text-center"><small>LG <span class="screen-size"></span></small></div></div></div>');
        displayScreenSize();
        $('#zuiDebug').fadeIn();
        $(window).resize(displayScreenSize);

        function displayScreenSize() {
            $('#zuiDebug .screen-size').text($(document).width() + ' x ' + $(document).height());
        }
    });
}(jQuery, window, document));