2

我在我的网站上添加了一个元规则，所以 ipad 会缩小所有内容，我只希望在横向模式下发生这种情况，当用户将方向更改为纵向或用户以纵向模式加载页面时，我希望比例更改为1 和整个页面缩放以适应。

我用过这段代码。

if(ipad){
            window.onorientationchange = function() {

                var orientation = window.orientation;
                var location = window.location.href;
                gallery.rescale();
                if (orientation === 0) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').removeClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').addClass('next-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(1)').removeClass('next-thumb');



                    $("body").addClass("portrait");

                } else if (orientation === 90) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').removeClass('last-thumb')
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').removeClass('next-thumb');

                    $("body").removeClass("portrait");                      

                } else if (orientation === -90) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').removeClass('last-thumb')
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').removeClass('next-thumb');

                    $("body").removeClass("portrait");


                } else if (orientation === 180) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').removeClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').addClass('next-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(1)').removeClass('next-thumb');

                    $("body").addClass("portrait");

                }
            }       
        }

这使每行的缩略图可以在纵向和横向之间切换，并且效果很好。

我尝试添加<meta name="viewport" content="width=device-width, initial-scale=0.85" />每个方向更改规则，但它不起作用。

关于为什么的任何想法？我很想解决这个问题或知道是否有一个。

非常感谢您的帮助

4

1 回答 1

0

我已经弄清楚我需要在页面加载时添加/删除纵向，否则无法正确重新调整方向。

***谢谢 teewuane

于 2012-11-21T17:11:57.520 回答