javascript - 跪求：明明已经js动态加载了rem，为什么我的网页在ip6s和4s下还是出现结构混乱

在第一页，姓名刘佳和下面的英文liujia的p，在ip6s下和4s下面被挤得很厉害，明明就做了rem自适应了？为什么还是这样？
第二页在6s下面屏幕很长，可以装的下，4s下面就被挤出页面了？刚开始做，很多不懂，求指教？

    
    
    
    
    
    
    
    
    
    
    
    
    
    
 


    

        

            

                

            

            

            

                
刘佳
                
liujia
            


        


        

            

                

            

            

                

            
        
            
1995年加盟
            

            

        


        
刘佳
        
李继承
        

    


    



        

            
1995
            
1996
            
1997
            
1998
            
1999
            
2000
            
2001
        

@charset "utf-8";

body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin:0;padding:0;}
html{font-size:100px;}
body{font-size:0.14rem;}

img{display:block;max-width:100%;}

html,body{
    width: 100%;
    height: 100%; 
    overflow:hidden;
}
li{list-style: none;}
/*box-sizing:border-box;*/

.container{
    width: 6.4rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0%;
}
.container .page{
    height: 100%;
    position: relative;
}

.container .page0{
    background:url(../img/1bg.png) no-repeat center center;background-size: 100% 100%;
    width: 100%;height: 100%;padding-top: 1.34rem;box-sizing:border-box;
}
.show_border{
    margin:0 0 0 1.4rem;width: 3.6rem;height: 4.8rem;background:url(../img/1a.png) no-repeat center center;
    background-size: 100% 100%;z-index: 1;padding-left: 1%;padding-top: 1%; box-sizing:border-box;
    margin-bottom: 3%;
}
.show{
    background:url(../img/2a.png) no-repeat center center;background-size: 100% 100%;
    width: 98%;height: 98.5%;
}
.yun{
    background:url(../img/yun.png) no-repeat center center;background-size: 100% 100%;
    width: 2rem;height: 1rem;margin:auto;
}
.name{
    width: 2.4rem;text-align: center;line-height: 1.2;margin:auto;margin-top: 2%;

}
.name_p1{
    font-size: 0.75rem;font-family: "fzxkjw"; 
}
.name_p2{
    font-size: 0.34rem;font-family: "方正大标宋简体"; 
}



.container .page1{
    background:url(../img/2bg.png) no-repeat center center;background-size: 100% 100%;width: 100%;height: 100%;
    padding-top: 24%;box-sizing:border-box;
}
.show1_border{
    margin:0 0 0 0.75rem;width: 4.06rem;height: 3.2rem;background:url(../img/3a.png) no-repeat center center;
    background-size: 100% 100%; margin-bottom: 0.2rem;padding: 0.06rem 0.08rem 0.08rem 0.08rem;box-sizing:border-box;
}
.show1{
    background:url(../img/5a.png) no-repeat center center;background-size: 100% 100%;
    width: 100%;height: 100%;
}
.show2_border{
    margin:0 0 0 0.75rem;width: 4.06rem;height: 3.2rem;background:url(../img/3a.png) no-repeat center center;
    background-size: 100% 100%;padding: 0.06rem 0.08rem 0.08rem 0.08rem;box-sizing:border-box;margin-bottom: 0.3rem;
}
.show2{
    background:url(../img/4a.png) no-repeat center center;background-size: 100% 100%;
    width: 100%;height: 100%;
}
.page1_time{position:absolute;left: 10%;bottom:30%;font-size: 0.34rem;color: #fff; }
.time{}
.page1_title{
margin:auto;
}
.page1_title2{
    margin:auto;
}



.container .page2{
    background:url(../img/3.png) no-repeat center center;background-size: 100% 100%;width: 100%;height: 100%;
    
}
.container .page3{
    background:url(../img/4.png) no-repeat center center;background-size: 100% 100%;width: 100%;height: 100%;
    
}
.container .page4{
    background-color: #f0f;
    
}


.xiangxiatishi{
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    -webkit-animation:dong 1s linear 0s infinite alternate;
            animation:dong 1s linear 0s infinite alternate;
}

@-webkit-keyframes dong{
    from{bottom:20px;}
    to{bottom: 60px;}
}
@keyframes dong{
    from{bottom:20px;}
    to{bottom: 60px;}
}

@font-face{
    font-family: fzxkjw;
    font-family:"方正大标宋简体";
    }
/*
@font-face {
    font-family:;
    src: url('MicrosoftYaHei.eot');
    src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'),
             url('MicrosoftYaHei.woff') format('woff'), 
             url('MicrosoftYaHei.ttf')  format('truetype'), 
             url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg');
   }

   */
 
.mask{background-color:#999;display:none;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0.4;filter:alpha(opacity:40);z-index:50;}

.dialog_age{width:60%;height:25%;display:none;z-index:100;background-color:#FCC;position:absolute;left:20%;top:30%;}

.dialog_age ul li{text-align:center;font-size:0.2rem;background-color:#6CF;margin:1% auto;padding:0.06rem;}

$(document).ready(
    function() {
        var nowpage = 0;
        $(".container").swipe(
            {
                swipe:function(event, direction, distance, duration, fingerCount) {
                     if(direction == "up"){
                         nowpage = nowpage + 1;
                     }else if(direction == "down"){
                         nowpage = nowpage - 1;
                     }

                     if(nowpage > 3){
                         nowpage = 3;
                         
                     }

                     if(nowpage < 0){
                         nowpage = 0;
                     }

                     if (nowpage == 3) {
                         $(".xiangxiatishi").css("display","none")
                     };

                    $(".container").animate({"top":nowpage * -100 + "%"},300);

                    $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
                }
            }
        );

        $('.page1_time').click(function (){
            $('.mask').css({display:"block"});
            $('.dialog_age').removeClass("animated fadeOutUpBig");
            $('.dialog_age').css({display:"block"}).addClass("animated fadeInDownBig");
            })
        
        $('.dialog_age ul li').on('click',function (){
            $('.time').text($(this).html());
            $('.dialog_age').removeClass("animated fadeInDownBig");
            $('.dialog_age').addClass("animated fadeOutUpBig");
            $('.mask').css({display:"none"});
        })


    }
);