前段时间在做项目时,应客户显示设备的多样性,需要适应多种设备。当时就考虑到了CSS3中的transform:scale属性,边学习边使用。
开始一切正常。核心代码如下。
var clientWidth = document.documentElement.clientWidth; //计算出的浏览器可见宽度var clientHeight = document.documentElement.clientHeight; //计算出的浏览器可见高度var standardWidth = 1920; //浏览器标准,数值越大,显示越小var scale = clientWidth / standardWidth;function AutoSize() { clientWidth = document.documentElement.clientWidth; clientHeight = document.documentElement.clientHeight; scale = clientWidth / standardWidth; height = clientHeight / scale; $("body").css({ "width": standardWidth, "-moz-transform": "scale(" + scale + ")", "-o-transform": "scale(" + scale + ")", "zoom": scale }); $("body").height(clientHeight / scale); /*其他代码*/}但是后来发现当scale值不为1,并且使用select 标签时,下拉面板的位置是偏移的且不受scale属性的影响:
所以源生的select不可用。因为当前项目中已经使用了easy-ui,所以想先用easyui 的combobox试试,结果还是不行。
可见easyui 对于scale属性也是没有处理的,所以只好自己更改easyui的源代码或者自己写个控件。
因时间有限,这两种方法花费时间都较长,我选择了最简单的属性覆盖方法。大家在时间足够的情况下还是自己写个控件较为稳妥。。。
<script type="text/javascript"> document.write("<style>.combo-p{left:" + (standardWidth * scale * 0.4 + 127) + "px !important;top:" + (scale*100) + "px !important;}</style>"); </script>这边写了一个conbo-p的样式,用来覆盖easyui的原始样式,具体值需要计算。然后一切正常:
新闻热点
疑难解答