在小型设备上轻扫互换页面，在大型设备上显示彼此相邻的页面

Question

有两个页面A和B.在小型设备上，默认情况下应显示A，并且B应该可以通过滑动事件显示。在较大的设备上，两个页面应该彼此相邻显示。

我真的不知道如何处理这个问题。我尝试使用另一个库（iDangero.us swiper）进行滑动，但我也使用了很多动态控件的knockout.js，并且在这种情况下使用swiper是安静的一团糟（它很难同步knockout.js和jQuery Mobile）。所以我打算回到使用jQuery Mobile页面和转换。

Answer 1

如果您熟悉它们，可以使用Iframe。

iframe触摸页面滚动可能是个问题。但是有各种简单的解决方案。

页面结构

主page.htm 平板page.html中 page1.html page2.html

。

Jquery检测屏幕视口宽度，并在需要时重定向到平板电脑视图。

在main-page.html文件中添加

       $(window).onload(function() {
       var wi = $(window).width();   
        if (wi => 900){         
        window.location.href = 'tablet-page.html';
       };            
       });

tablet-view.html有2个iframe，其中包含page1和Page2 html链接。

使用一些css自动将iframe调整为50％50％视图。可能需要一个容器。

结果 如果它的平板电脑大小那么

原谅糟糕的图形