你可以根据屏幕大小进行html表单分页吗？如果是这样怎么办？ [关闭]答案

【问题标题】：Can you do html form pagination based on screen size? if so how? [closed]你可以根据屏幕大小进行html表单分页吗？如果是这样怎么办？ [关闭]
【发布时间】：2016-06-02 17:54:37
【问题描述】：

例如，我有 30 个问题要问，它会在笔记本电脑上显示 3 个页面，但在移动设备上显示 10 个页面，我们可以这样做吗？当然还有一个下一步按钮

【问题讨论】：

需要进一步考虑 UI：您是否考虑过屏幕尺寸在页面之间发生变化的情况？用户可以随时在计算机上调整视口的大小，这将是一种非常混乱的体验。
欢迎来到 Stack Overflow！虽然我们愿意帮助您解决问题，但您能否编辑您的问题以包含 Minimal, Complete, and Verifiable 示例？我们需要它来调试问题，因为 1）这使我们更容易解决实际问题，并且 2）如果解决了，将添加到 Stack Overflow 的知识库中，以便其他有相同问题的人可以在这里找到解决方案或从中学习。
滚动并不是一个邪恶的 UI 功能。

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

您可以阅读浏览器宽度并考虑使用 600 之类的阈值来定义移动设备或桌面设备的使用。将此解决方案视为使用 jQuery 的客户端分页：

var current_width = $(window).width();
if(current_width<600) pageSize = 3;
if(current_width>600) pageSize = 10;

showPage = function(page) {
    $(".question").hide();
    $(".question").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}
    
showPage(1);

$("#pagination a").click(function() {
    $("#pagination a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text())) 
});

.question {
  margin: 5px 0;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  border: 1px solid #565656;
  background-color: #efefef;
}

#pagination {
  list-style: none;
  width:200px;
  margin:10px auto;
}
#pagination li {
  float:left;
  margin-right:10px;
}
#pagination a {
  display:block;
  color:#787878;
  padding:5px 8px;
  border-radius:3px;
  background:#f9f9f9;
}
#pagination a.current {
  color:white;
  background:#8989ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class=""questions">
  <div class="question">1 I have some first question</div>
  <div class="question">2 I have some second question</div>
  <div class="question">3 I have some third question</div>
  <div class="question">4 I have some forth question</div>
  <div class="question">5 I have some fifth question</div>
  <div class="question">6 I have some sixth question</div>
  <div class="question">7 I have some seventh question</div>
  <div class="question">8 I have some eighth question</div>
  <div class="question">9 I have some ninth question</div>
  <div class="question">10 I have some tenth question</div>
  <div class="question">11 I have some eleventh question</div>
  <div class="question">12 I have some twelveth question</div>
</div>
<ul id="pagination">
  <li><a class="current" href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul>

【讨论】：