如何实现适用于桌面和移动设备的水平可伸缩页面布局

Question

我尝试过使用table，div和其他东西，但到目前为止，当在移动设备上查看完整的桌面版网站时，仍会遇到各种问题。我有一个移动版本的网站，但我仍然没有我想要的所有功能，所以我有强制桌面网站选项来查看完整的网站。我遇到的主要问题是，当我从网站缩小时，标题不会拉伸而不再居中。此外，页脚不会像我希望的那样停留在移动设备中的浏览器底部。我使用JQueryMobile的移动网站确实停留在底部，但不是完整桌面网站的情况。有没有人有类似的布局，他们可以分享，实现我在下面的图像，我可以重新开始？

Answer 1

我只能帮助您解决使用jQuery mobile的页脚问题。 对我来说，有两个解决方案有效：

1

        <footer data-role="footer" style="position: absolute; bottom: 0; width: 100%">
            <!--footer goes just here-->
            <h1>Page Footer</h1>
        </footer>

2。

        <footer data-role="footer" data-position="fixed">
            <!--footer goes just here-->
            <!--footer will allways be displayed-->
            <h1>Page Footer</h1>
        </footer>