layui之layer根据分辨率调整全屏(js判断分辨率)

问题背景

使用layer作为后台CRUD UI体系的时候，大多数 添加/编辑 功能我是使用了layer.open来打开一个模态页面框。该方案在高分辨率的时候十分友好，但是在低分辨率特别是笔记本上显示效果堪忧，建议全面。
所以我们的解决思路是: 利用js判断分辨率，width横向分辨率 大于 1366则layer默认小窗口，如果横向低于或者等于1366分辨率则直接layer全屏。

大屏的范围一般是从width大于1366开始，例如我这个2k屏编辑起来就超级无敌爽，width小于或者低于1366，例如那些破笔记本，直接视为小分辨率，模态框全部改为全屏显示。

解决方案

原代码如下

/**
  * tool监听事件:表格编辑删除等功能按钮
  */
 table.on('tool(currentTableFilter)', function (obj) {
     var data = obj.data;
     if (obj.event === 'edit') {
         var index = layer.open({
             title: '编辑',
             type: 2,
             shade: 0.2,
             maxmin:true,
             shadeClose: true,
             area: ['800px', '600px'],
             content: '${request.contextPath}/certCompany/edit?id='+obj.data.certId+'&token='+layui.data('token').token,
         });
         return false;
     } 
}

如何做最少改动呢，于是我想到了加一个js方案去判断和变更。

/**
 * 低分辨率模式直接全屏
 * by zhengkai.blog.csdn.net
 */
function setFullScreen(index){
    const screenWidth = screen.width;
    console.log(screenWidth);
    //笔记本分辨率，直接全屏
    if(screenWidth<=1366){
        layer.full(index);
    }
}
/**
  * tool监听事件:表格编辑删除等功能按钮
  */
 table.on('tool(currentTableFilter)', function (obj) {
     var data = obj.data;
     if (obj.event === 'edit') {
         var index = layer.open({
             title: '编辑',
             type: 2,
             shade: 0.2,
             maxmin:true,
             shadeClose: true,
             area: ['800px', '600px'],
             content: '${request.contextPath}/certCompany/edit?id='+obj.data.certId+'&token='+layui.data('token').token,
         });
         //低分辨率模式直接全屏
         setFullScreen(index);
         return false;
     } 
}

验证效果

分辨率小于等于1366 ，默认全屏模式

分辨率大于1366 ，默认小窗口模式

Done！