Question

我开始学习如何让我的网络内容对移动设备更有趣。

$(document).ready(function(){
        placeContent();         
    });

function placeContent(){
         var h = $(document).height();
         h -= $('#PageWrapper').height();
         h /= parseInt(2);
         $('#PageWrapper').css( "margin-top", h + "px" );
    }

$( window ).on( "orientationchange", function( event ) {
        placeContent();
    });

替换内容的方法不起作用。它应该将内容集中在屏幕的中心。

此致 NetBu ||

Answer 1

将我的代码更改为：

<script>

    function placeContent(){
         var h = $(document).height();
         h -= $('#PageWrapper').height();
         h /= parseInt(2);
         $('#PageWrapper').css( "margin-top", h + "px" );
         write("lreplaced the content....");
    }

    function setBodiesClass(){
        if( getDeviceType() == "mobile" ){              
            if($(document).height() > $(document).width()){
                $("body").attr( "class", "portrait" )
                write("load portrait style");
            } else {
                $("body").attr( "class", "landscape" )
                write("load landscape style");
            }               
        } else {                
            $("body").attr( "class", "browser" )
            write("load browsers style");
        }
    }

    function getDeviceType(){
        sReturn = null;
        if( sDeviceType == null ){
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                sReturn = "mobile";
            } else {
                sReturn = "browser";
            }
        }
        return sReturn;
    }

    function write(sMessage){
        $("#Messages").append("<p>" + sMessage + "</p>");
    }

    function onLoadOrOrientationChanged(){
        setBodiesClass();
        placeContent();
    }

    $(document).ready( function(  ){
        write("page was ready");
        onLoadOrOrientationChanged();
    });

    /*
    $( window ).on( "orientationchange", function( event ) {
        write("page orientation changed");
        onLoadOrOrientationChanged();
    });
    */

    var orientationEvent = "onorientationchange" in window ? "orientationchange" : "resize";
    $(window).on(orientationEvent, function() {
        onLoadOrOrientationChanged();
    });

</script>

Misterious：从风景到protrait，它说： - ＆GT;加载景观风格它说，回到景观 - ＆GT;加载肖像样式

但是placeContent函数没有替换内容...... 但更换内容后的写入方法会被触发......

jquery :: on orientationchange不替换元素

1 个答案: