使用jquery-mobile在多个页面上显示故事

Question

我有一个很长的故事，我希望人们用他们的手机阅读。用户将能够在页面之间来回滑动。我不希望它只是向上和向下滚动。因为所有手机都有不同的窗口大小，所以在创建另一个新页面之前，我无法弄清楚如何让我的故事完全填满页面。换句话说，把我的故事分成相等长度的窗口大小。

我尝试了一些jquery，一次添加一个字符，直到达到窗口大小但如果运行时长于单个页面，如何动态创建另一个页面？

     <style type=text/css>
          div {height:10em; width:auto; line-height:1em; font-size:1em; }
     </style>

       <div id="longContent"><p>Lorem ipsum...</p></div>
       <div id="newDiv"></div>
     <script>
       $(document).on("pageinit",function(){
       $('#longContent').each(function(){
       var text = $("#longContent").html().split(' '),
          len = text.length,        
          result = []; 
       var maxHeight = $(window).height();
       var newHeight =$("#newDiv").height();

        for( var i = 0;newHeight <= maxHeight && i<len; i++ ) {
             result[i] = text[i]; }

         $("#newDiv").html(result.join(' ')); 

         });        
      });
</script>

我感谢任何帮助。非常感谢！