如何在 iPad 野生动物园上正确缩放页面?不涉及 CSS

How do I scale a page on ipad safari correctly? no css involved

本文关键字：缩放 CSS iPad 动物园      更新时间：2023-09-26

我的页面是 980px，它在横向上看起来很完美，但在纵向上它被切断了。 所以我尝试了

<meta name="viewport" content="user-scalable=no, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, width=device-width">
它

完美地显示了肖像，但在横向上它太小了。我试图通过使用 js 来检测方向何时更改并重置视口属性、不起作用或在一定程度上工作但存在可怕的错误来解决此问题。我不能使用任何类型的 css 媒体查询，因为该网站是 980 并且无法更改。

有没有办法做我需要的？谢谢

编辑

我试过类似的东西

if (orientation == 0 || orientation == 180) {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=990px");
}
else {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=0.77, minimum-scale=0.77, maximum-scale=0.77, width=990px");
}

检测iPad何时旋转有效，但使用视口进行缩放永远无法正常工作

我知道

你说过你不想使用 css，但假设这是因为你不想处理将现有 css 更改为纵向工作，也许这可能对你有用。

@media only screen and (orientation : portrait) {
    body {
        -webkit-transform: scale(0.75);
    }
}
这

不行吗？我的网页是响应式的，但即使在固定宽度的页面上，我在 iOS 显示页面时遇到问题，因为我已经解决了方向更改：

元标记

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

其次是我在这里找到的这个JS：http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape(如果您添加用户代理检查，则适用于iPad。

iOSZoom.js (需要 jQuery(

var mobile_timer = false;
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
    $(window).bind('gesturestart', function () {
        clearTimeout(mobile_timer);
        $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=10.0');
    }).bind('touchend', function () {
        clearTimeout(mobile_timer);
        mobile_timer = setTimeout(function () {
            $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
        }, 1000);
    });
}

然后<script src="iOSZoom.js" type="text/javascript"></script>，像新的:D一样好

相关文章：