精华内容
下载资源
问答
  • 2019-08-19 12:07:50

    JS判断屏幕分辨率

    <script>
    function ScreenWidth(){
                if (screen.width == 1440){
                  alert("1440*900");
              }else  if (screen.width == 800){
                    alert("800*600");
             }else if (screen.width == 1152){
                     alert("1152*864");
             }else {
                      alert("未知分辨率!");
             }
    }
    </script>
    <input type="button"  name="" value="fenbianli "  onclick=" ScreenWidth()"/>
    
    更多相关内容
  • 一般我们可以通过下面的代码判断分辨率 代码如下:[removed] <!– Begin function redirectPage() { var wjb51=screen.width;var hjb51=screen.height;alert(“经系统检测,你的屏幕分辨率为 ” + wjb51+...
  • 所以我们的解决思路是: 利用js判断分辨率,width横向分辨率 大于 1366则layer默认小窗口,如果横向低于或者等于1366分辨率则直接layer全屏。 大屏的范围一般是从width大于1366开始,例如我这个2k屏编辑起来就超级...

    问题背景

    使用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!

    展开全文
  • 最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下, 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>无标题文档...
  • //判断是否是pc端 true为pc端 false为移动端 function isPc() { var width = document.documentElement.clientWidth if (width <= 600) { return false; } else { return true; } }
    //判断是否是pc端 true为pc端 false为移动端
    function isPc() {
        var width = document.documentElement.clientWidth
        if (width <= 600) {
            return false;
        } else {
            return true;
        }
    }
    
    展开全文
  • 通过js判断访客显示器屏幕分辨率并给出提示 先给出代码示例: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这段代码大意是通过比较图片分辨率和桌面分辨率来判定改图是否适合直接用作访客的桌面壁纸。其中fw=...
  • js自动判断浏览器分辨率的代码
  • JS获取屏幕分辨率 及 窗口尺寸

    万次阅读 2018-12-13 16:30:24
    <script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if (...
    网页可见区域宽:document.body.clientWidth 
    网页可见区域高:document.body.clientHeight 
    网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
    网页可见区域高:document.body.offsetHeight (包括边线的宽) 
    网页正文全文宽:document.body.scrollWidth 
    网页正文全文高:document.body.scrollHeight 
    网页被卷去的高:document.body.scrollTop 
    网页被卷去的左:document.body.scrollLeft 
    网页正文部分上:window.screenTop 
    网页正文部分左:window.screenLeft 
    屏幕分辨率的高:window.screen.height
    屏幕分辨率的宽:window.screen.width
    屏幕可用工作区高度:window.screen.availHeight
    屏幕可用工作区宽度:window.screen.availWidth
    
    获取窗口宽度:window.innerWidth
    获取窗口高度:window.innerHeight
    
    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
    scrollHeight: 获取对象的滚动高度。 
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
    scrollWidth:获取对象的滚动宽度 
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    event.clientX 相对文档的水平座标 
    event.clientY 相对文档的垂直座标 
    event.offsetX 相对容器的水平坐标 
    event.offsetY 相对容器的垂直坐标 
    document.documentElement.scrollTop 垂直方向滚动的值 
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 
    
    IE,FireFox 差异如下: 
    
    IE6.0、FF1.06+: 
    clientWidth = width + padding 
    clientHeight = height + padding 
    offsetWidth = width + padding + border 
    offsetHeight = height + padding + border 
    
    IE5.0/5.5: 
    clientWidth = width - border 
    clientHeight = height - border 
    offsetWidth = width 
    offsetHeight = height 
    
    (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth
    -------------------
    技术要点
    本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
    要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
    Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
    Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
    document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
    
    实现代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>请调整浏览器窗口</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    </head>
    <body>
    <h2 align="center">请调整浏览器窗口大小</h2><hr>
    <form action="#" method="get" name="form1" id="form1">
    <!--显示浏览器窗口的实际尺寸-->
    浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
    浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
    </form>
    <script type="text/javascript">
    <!-- 
    var winWidth = 0;
    var winHeight = 0;
    function findDimensions() //函数:获取尺寸
    {
    //获取窗口宽度
    if (window.innerWidth)
    winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
    //获取窗口高度
    if (window.innerHeight)
    winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
    //通过深入Document内部对body进行检测,获取窗口大小
    if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
    }
    //结果输出至两个文本框
    document.form1.availHeight.value= winHeight;
    document.form1.availWidth.value= winWidth;
    }
    findDimensions();
    //调用函数,获取数值
    window.onresize=findDimensions;
    //-->
    </script>
    </body>
    </html> 
    展开全文
  • 判断分辨率,也判断浏览器 重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。 代码如下:[removed] <!– if (window.navigator.userAgent.indexOf(“MSIE”)>=1) { var IE1024=””; ...
  • js判断当前浏览器的分辨率

    千次阅读 2018-06-11 11:32:10
    //根据尺寸进行判断 苹果的型号 if (screen.height == 812 && screen.width == 375) { console.log("苹果X"); } else if (screen.height == 736 && screen.width == 414) { console.log("iPhone7P - iPhone8P -...
  • CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局
  • js 实现 检测屏幕分辨率! 值得下载看看!资源免费,大家分享!!
  • js 获取电脑的分辨率和缩放

    千次阅读 2021-06-17 17:42:19
    废话不多说,直接上代码 <script> function centerWindow(url,w,h){ l=(screen.width-w)/2 t=(screen.height-h)/2 window.open(url,'','left='+l+',top='+t+',width='+w+',height='+h) ...
  • 本节内容:根据分辨率调用CSS样式文件这是在一个网站中看的效果,可以根据显示器不同的分辨率,调用的样式文件也不同。例子:复制代码 代码示例:根据分辨率调用不同的CSS样式文件-...
  • JS判断浏览器分辨率自动调用不同CSS!
  • 如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢?请看下面一段代码: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • JavaScript如何优雅地获取屏幕分辨率

    千次阅读 2022-04-01 10:05:53
    长话短说,网上很多推荐的window.screen.width和window.screen.height其实在屏幕缩放比为1的时候是能获取到屏幕分辨率的,但有些屏幕的屏幕缩放比并不是1,这个时候获取到的并不是真正的屏幕分辨率,开始放大招: ...
  • 其实这个问题很简单通过js判断屏幕分辨率大小,根据不同的分辨率分别调用移动端的商桥与PC端的商桥即可,下面直接切入解决方法。1.HTML中的javascript代码: &lt;SCRIPT language=JavaS...
  • 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可。 在包含的头文件headr.inc中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,532
精华内容 6,212
关键字:

js判断分辨率

友情链接: 8086PPT.rar