1

jQuery Mobile Web サイトのヘッダーに画像があり、自動的にサイズを変更して画面いっぱいに表示します。私のページには、ログインユーザー用のサブページがあります。ただし、このページでは画像のサイズ変更は機能しません。

解決策をグーグルで調べていると、最初の data-role="page" div 内でのみ jQuery が動作できるようにする jQuery Mobile が原因であることが既にわかっています。しかし、私はそれぞれの解決策を試しているので、どれもうまくいかないようです。

解決策を見つけるのを手伝ってもらえますか?

私のコード（短いコピー/貼り付けの例）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            window.onresize = function (event) {
                resizeimage();
            }
            window.onload = function (event) {
                resizeimage();
            }            
            function resizeimage() {
                var img = document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width = newwidth;
                img.height = newheight;     
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                FOOTER
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                FOOTER
            </div>
        </div>
    </body>
</html>

まだ解決策を探しています...

4

1 に答える 1