如何在ipad中调整/重新缩放网页

Question

我有一个网站使用jquery mobile为它的移动版本.我有一个问题,当我将它从纵向更改为横向时,它正确放大,但当我翻转到纵向时,它保持相同的缩放级别,并且比打破用户体验的视图更宽.我经常使用:

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

从我所做的所有搜索,这应该做.不幸的是,它不适合我.

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

PS网站在这里,如果您想看一眼http://tmg.dev.dakic.com/mobile

谢谢你,Zeljko

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();