jQuery：如何在没有“内容”刷新的情况下根据浏览器屏幕大小制作“实时寻呼机”？

real-time pager

content

#content{
    display:block;
    width:100%;
    height:40%;
    min-height:205px;
    max-height:408px;
    overflow:hidden;
}
li{
    width:100px;
    height:100px;
    margin:1px;
    float:left;
    background:#ccc;
}
...
<ul id="content">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
<div id="pager"><!--here lets show 1,2,3,4 etc. depending on screen size--></div>