<address id="997j9"></address>

                    首頁 > 設計 > WEB開發 > 正文

                    使用transform :scale做頁面大小自適應時,下拉框面板偏移的問題

                    2019-11-02 19:00:21
                    字體:
                    來源:轉載
                    供稿:網友

                    前段時間在做項目時,應客戶顯示設備的多樣性,需要適應多種設備。當時就考慮到了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的原始樣式,具體值需要計算。然后一切正常:


                    發表評論 共有條評論
                    用戶名: 密碼:
                    驗證碼: 匿名發表
                    久久久国产精品午夜一区 欧美最爽乱婬视频免费看 日产精品99久久久久久 精品国产污污免费网站入口 亚洲碰碰人人Av熟女天堂

                                    <address id="997j9"></address>

                                      <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>