在小型设备上交换具有滑动功能的页面，在大型设备上显示彼此相邻的页面。

Question

在一个小设备上有两个页面A和B。在默认情况下，A应该显示，B应该是可用的滑动事件。在较大的设备上，两个页面都应该显示在彼此的旁边。

我真的不知道怎么处理这件事。我试着使用另一个库(iDangero.us swiper)来进行滑动，但我也使用了带有大量动态控件的knockout.js，并且在这个场景中使用swiper非常混乱(很难同步knockout.js和jQuery移动)。因此，我计划回到使用jQuery移动页面和转换。

Answer 1

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

如果触摸页面滚动可能是一个问题。但有各种简单的解决办法。

页面结构

主-page.htm tablet-page.html页面1.html page2.html

。

Jquery以检测屏幕视图宽度，并在需要时重定向到tablet视图.

在main-page.html文件中添加

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

tablet-view.html有两个带有page1和Page2 html链接的Iframes。

使用一些css自动调整iframes到50% 50%视图的大小。可能需要一个容器.

结果如果它的药片大小

​

​

原谅不好的图形