2

私はMobilize.js フレームワークを使用しており、Web サイトをモバイル化しました。すべてが正常に機能しており、ウェブサイトはデスクトップとモバイルの両方で期待どおりに見えます.

デスクトップ版のウェブサイトには、少し重い背景画像が含まれています。しかし、低帯域幅のモバイルでも可能な限り高速に読み込まれるように、動員バージョンには背景やその他の画像を含めていません。

しかし、私が直面している問題は、ウェブサイトをモバイルで開くと、モバイル版では必要ないにもかかわらず、重い背景画像が読み込まれることです。公式ドキュメントによると、モバイル ブラウザが検出されるとすぐに画像やその他のファイルの読み込みを停止するはずです。

これがページの構造です<head>

<script src="js/jquery-1.8.2.min.js"></script>

<script>
    //to define the structure of the mobile version
    function mobilizeCustomInit()
    {
        ...
    }
</script>   

<!-- load the core mobilize js file -->
<script type="text/javascript" src="/mobilize/js/mobilize.core.min.js"></script> 

<!-- set the cdn options -->
<script type="text/javascript">
    mobilize.cdnOptions.baseURL = "http://mywebsite.com/mobilize";
</script>

<!-- css stylesheet - CSS FOR DESKTOP ONLY -->
<link rel="stylesheet" href="main.css">

上記の<head>構造から明らかなように、mobilize.js ファイルの後にデスクトップ スタイルシート (デスクトップ専用の背景画像スタイルが定義されている場所) を含めました。そのため、mobilize.js ファイルが最初に読み込まれて実行され、「main.css」ファイル (または少なくともこの css ファイルで使用されている画像) の読み込みを停止する必要がありますが、それは行われていません。

では、モバイルで Web サイトを開いたときに、デスクトップ版の css ファイルが読み込まれないようにするにはどうすればよいでしょうか?

4

1 に答える 1

0

このサンプル HTML ページを参照してください - https://github.com/mobilizejs/mobilize.js/blob/master/integrations/example/sample.html

あなたは電話しているはずです

    <script type="text/javascript">

        // Called when mobilize.js is autoloading and init() is called
        function mobilizeCustomInit() {

             // Add new Javascript and CSS files to mobile
             // file loading list

             // Note: Slashdot at the beginning of the filename
             // indicates that the file path is relative to the HTML file location.
             // This is an internal trick of mobilize.js.
             mobilize.cdnOptions.javascriptBundles.push("./mobilize.yoursite.js");
             mobilize.cdnOptions.cssBundles.push("./mobile-style.css");                 
        }            
    </script>

特定のモバイル js と css をロードできるようにします。

于 2012-11-05T08:22:55.143 に答える