前段時(shí)間在做項(xiàng)目時(shí),應(yīng)客戶顯示設(shè)備的多樣性,需要適應(yīng)多種設(shè)備。當(dāng)時(shí)就考慮到了CSS3中的transform:scale屬性,邊學(xué)習(xí)邊使用。
開(kāi)始一切正常。核心代碼如下。
var clientWidth = document.documentElement.clientWidth; //計(jì)算出的瀏覽器可見(jiàn)寬度var clientHeight = document.documentElement.clientHeight; //計(jì)算出的瀏覽器可見(jiàn)高度var standardWidth = 1920; //瀏覽器標(biāo)準(zhǔn),數(shù)值越大,顯示越小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); /*其他代碼*/}但是后來(lái)發(fā)現(xiàn)當(dāng)scale值不為1,并且使用select 標(biāo)簽時(shí),下拉面板的位置是偏移的且不受scale屬性的影響:
所以源生的select不可用。因?yàn)楫?dāng)前項(xiàng)目中已經(jīng)使用了easy-ui,所以想先用easyui 的combobox試試,結(jié)果還是不行。
可見(jiàn)easyui 對(duì)于scale屬性也是沒(méi)有處理的,所以只好自己更改easyui的源代碼或者自己寫(xiě)個(gè)控件。
因時(shí)間有限,這兩種方法花費(fèi)時(shí)間都較長(zhǎng),我選擇了最簡(jiǎn)單的屬性覆蓋方法。大家在時(shí)間足夠的情況下還是自己寫(xiě)個(gè)控件較為穩(wěn)妥。。。
<script type="text/javascript"> document.write("<style>.combo-p{left:" + (standardWidth * scale * 0.4 + 127) + "px !important;top:" + (scale*100) + "px !important;}</style>"); </script>這邊寫(xiě)了一個(gè)conbo-p的樣式,用來(lái)覆蓋easyui的原始樣式,具體值需要計(jì)算。然后一切正常:
新聞熱點(diǎn)
疑難解答
圖片精選