javascript - 如何在 iPad 中调整/重新缩放网页

Question

我有一个使用 jquery mobile 作为其移动版本的网站。当我将它从纵向更改为横向时出现问题，它可以正确放大，但是当我翻转为纵向时，它保持相同的缩放级别并且比破坏用户体验的 View 更宽。我使用常规:

<meta name="viewport" content="width=device-width, initial-scale=1">

根据我所做的所有搜索，这应该可以。不幸的是它不适合我。

这是我的问题，我可以使用 onorientationchange 事件来触发页面的大小调整，我只是不确定如何去做。你能帮忙吗？

附言如果您想看一看，网站就在这里http://tmg.dev.dakic.com/mobile

谢谢，热利科

Answer 1

试试这个，我有一个类似的问题:

    $(window).bind('orientationchange', function(event) {
    if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=2.0');
        $(window).resize();
    } else {
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=2.0');
        $(window).resize();
    }
    }).trigger('orientationchange');  

尝试在某些事件中使用 resize() 函数:

 $(window).resize();