jquery - 我可以为 iPad 指定纵向初始 View 比例和横向初始 View 比例吗？

Question

我在我的网站中添加了一条元规则，因此 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" />在每个方向更改规则上，但它不起作用。

有什么想法可以解释为什么吗？我希望有一个解决方案来解决这个问题，或者想知道是否有解决方案。

非常感谢您的帮助

Answer 1

我发现我需要在页面加载时添加/删除肖像，否则方向无法正确重新缩放。

***谢谢teewuane