div按照屏幕尺寸(設備大小)進行縮放

来源:https://www.cnblogs.com/hdwang/archive/2017/12/26/8120590.html
-Advertisement-
Play Games

原理:利用css3 transform 屬性 代碼: ...


原理:利用css3 transform 屬性

代碼:

body{
            width: 810px;
            height: 340px;
            margin: 0px;
            padding: 0px;
            background-color: #2e2423;
            display: none; /**先隱藏,縮放後再顯示,防止閃爍**/
        }
<!--  腳本 -->
<script src="${rc.contextPath}/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript">

    //縮放視圖
    $(document).ready(function(){
        resizeDiv();
    });

    var resizeDiv = function(){
        var width = $(window).width();
        var height = $(window).height();
        var scaleX = width/810; //設備預設寬度為810px
        var scaleY = height/340; //設備預設高度為340px

        //按設備比例縮放div的比例
        var scaleFunc = "scale("+scaleX+","+scaleY+")";

        $('body').css({
            "transform":scaleFunc, //縮放比例
            "transform-origin":"left top", //縮放基點

            "-ms-transform":scaleFunc,     /* IE 9 */
            "-ms-transform-origin":"left top",

            "-moz-transform":scaleFunc,     /* Firefox */
            "-moz-transform-origin":"left top",

            "-webkit-transform":scaleFunc, /* Safari 和 Chrome */
            "-webkit-transform-origin":"left top",

            "-o-transform":scaleFunc,     /* Opera */
            "-o-transform-origin":"left top",
        });

        $('body').show();
    };
</script>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在接入FaceBook第三方登錄的時候,需要獲取Android Hash Key。 Android Hash Key即密鑰散列有兩種,一種是開發秘鑰散列,一種是發佈秘鑰散列。這裡主要介紹如何獲取開發秘鑰散列Debug Android Hash Key。 步驟如下: 1、到https://code.g ...
  • 一.移動客服端實現對PC端數據的操作 在PC端模擬一個資料庫,實現用戶的增刪改查,然後在移動客服端實現對PC端資料庫的操作 在PC端建立三個表 用戶表(Users),員工表(Emp), 部門表(Dept), User表對應欄位,並設置對應的set/get方法,這裡不一一寫出 Emp表對應欄位 Dep ...
  • 參考自http://blog.csdn.net/u010752082/article/details/50810190 代碼先貼出來: 首先說明一下,要搜索到歌詞,需要先搜索歌曲,得到歌曲對應的id和accesskey後才能進行歌詞的獲取。 那麼我們先從搜索歌曲的URL開始說起: 其中的name為搜 ...
  • 前言 前文在API規劃時就已經有提到過組件API這個概念,本文將會介紹它的原理以及實現 理解組件API這個概念 在quick hybrid中,API是按模塊劃分的,如 ,`page 組件` 為什麼叫組件?可以這樣理解,模塊更多的是H5前端的叫法(因為在前端看來不同API分別屬於不同的模塊下), 而組 ...
  • 近期在學習typescript的時候,發現ts居然可以對原生js做強檢測。發現從v2.3就開始直接了。這讓我感嘆他的變化,又讓我自己感到學習的緩慢。本文章就對他小試牛刀一下。 一、他是的使用與支持 通過閱讀官網的說明,瞭解到他實現驗證是通過jsdoc的註釋結構實現。然後在.js文件頭部加入如下註釋標 ...
  • 這裡的編譯前指的是開始觸發主要的事件流this-compilaiton、compilation之前,由於還有一些準備代碼,這一節全部弄出來。 模塊基本上只走構造函數,具體的方法調用的時候再具體講解。 上一節NormalModuleFactory模塊的構造函數中,在處理完rules後,註入兩個事件流就 ...
  • 最近由於工作的原因碰到一個問題,就是在一個彈窗寬度不定的情況下還能是該彈窗居中顯示,思考許久未找到合適辦法,於是在網上找到一些辦法在此總結記錄下來方便以後的學習。 方法一: 相容IE67,但是當元素寬度大於50%時,會出現滾動條。 這個是需要劇中的元素,寬度不確定 .father { display ...
  • 本想多留點時間寫博文的,但是無奈被諸多瑣事纏身,實際上也沒那麼多事,主要是自己可能分不太清時間輕重吧。 以後在9點開始寫博文,或者中午的時候,反正空下來就寫寫。 (醉了,我也是才知道博客裡面可以直接粘貼圖片,不用插入就行。。。。。) 又是一個很有意思的正則問題,剛開始的時候,總是糾結在sss和ddd ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...