个人中心
gpt4 book ai didi

javascript - 将视口(viewport)设置为缩放以适应宽度和高度

转载 作者：技术小花猫 更新时间：2023-10-29 10:46:18 25 4
gpt4 key购买 nike

我正在开发一个适合特定宽度和高度的网站(一个 885x610 的 div，边框为 1 像素，上边距为 3 像素)。我希望用户永远不必滚动或缩放来查看整个 div；它应该始终完全可见。由于设备的分辨率和宽高比各不相同，因此我想到了使用 JavaScript 动态设置“viewport”元标记的想法。这样，div 将始终具有相同的尺寸，不同的设备将不得不以不同的方式缩放，以便在其视口(viewport)中适应整个 div。我尝试了我的想法并得到了一些奇怪的结果。

以下代码适用于第一个页面加载(在 Android 4.4.0 上的 Chrome 32.0.1700.99 中测试)，但当我刷新时，缩放级别会发生变化。此外，如果我注释掉 alert，即使在第一页加载时它也不起作用。

Fiddle 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
        <script type="text/javascript">
            function getViewportWidth() {
                if (window.innerWidth) {
                    return window.innerWidth;
                }
                else if (document.body && document.body.offsetWidth) {
                    return document.body.offsetWidth;
                }
                else {
                    return 0;
                }
            }

            function getViewportHeight() {
                if (window.innerHeight) {
                    return window.innerHeight;
                }
                else if (document.body && document.body.offsetHeight) {
                    return document.body.offsetHeight;
                }
                else {
                    return 0;
                }
            }

            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
                var actual_width = getViewportWidth();
                var actual_height = getViewportHeight();

                var min_width = 887;
                var min_height = 615;

                var ratio = Math.min(actual_width / min_width, actual_height / min_height);

                if (ratio < 1) {
                    document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + actual_width);
                }
            }

            alert(document.querySelector('meta[name="viewport"]').getAttribute('content'));
        </script>
        <title>Test</title>
        <style>
            body {
                margin: 0;
            }

            div {
                margin: 3px auto 0;
                width: 885px;
                height: 610px;
                border: 1px solid #f00;
                background-color: #fdd;
            }
        </style>
    </head>
    <body>
        <div>
            This div is 885x610 (ratio is in between 4:3 and 16:10) with a 1px border and 3px top margin, making a total of 887x615.
        </div>
    </body>
</html>

我该怎么做才能使该网站缩放以适应宽度和高度？

最佳答案

获得一致的行为是可能的。但不幸的是，它非常复杂。我正在编写一个脚本，该脚本可以检测欺骗代理并相应地动态地将视口(viewport)重新缩放到桌面或其他欺骗代理。我还面临着 Android/Chrome 以及 iOS 模拟器的缩放问题......

要绕过它，您需要禁用缩放和/或设置视口(viewport)两次。在第一次通过时，最好在 <head> 中内联正如您现在所做的那样，您设置比例并暂时禁用用户缩放以防止缩放问题，对所有 3 个比例使用相同的固定值，例如:

document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+width+',minimum-scale='+scale+',maximum-scale='+scale+',initial-scale='+scale);

然后要恢复缩放，请在 DOMContentLoaded 上再次设置视口(viewport)，具有相同的比例，除了这次您设置正常的最小/最大比例值以恢复用户缩放:

document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+width+',minimum-scale=0,maximum-scale=10');

在您的上下文中，因为布局是固定的并且大于视口(viewport)，initial-scale='+scale DOMContentLoaded 可能需要更合理的替代方案:

document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+width+',minimum-scale=0,maximum-scale=10,initial-scale='+scale);

这应该可以让视口(viewport)重新缩放，就像您在 Webkit 浏览器中所希望的那样，而不会出现缩放问题。我只在 webkit 中说，因为遗憾的是 IE 和 Firefox 不支持根据此浏览器兼容性表的视口(viewport)、尺寸和设备像素比率更改视口(viewport)显示:http://www.quirksmode.org/mobile/tableViewport.html

IE 有自己的动态更改视口(viewport)的方法，这实际上是 IE 捕捉模式响应所必需的。 http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

因此，对于 IEMobile 和 IE SnapMode (IE10&11)，您需要动态插入内联 <style>在<head>用类似的东西。

<script>
 var s = document.createElement('style');
 s.appendChild(document.createTextNode('@-ms-viewport{width:'+width+'px')+';}'));
 document.head.appendChild(s);
</script>

不幸的是，Firefox 两者都没有:如上面的兼容性表所示，视口(viewport)是一次性设置的。目前，由于缺乏其他方法，使用 CSS Transform(正如@imcg 指出的那样)是在 Android 或 Gecko OS 上的 FireFox Mobile 中更改视口(viewport)的唯一方法。我刚刚测试过它，它在固定尺寸设计的背景下工作。 (在“响应式设计上下文”中，可以通过 CSS Transform 将布局重新调整为更大的尺寸，比如手机上的桌面大小，但 Firefox 仍然读取手机大小的 MQ。因此在 RWD 上下文中需要注意这一点。/除了 webkit )

不过，我注意到一些随机的 Webkit 在 Android 上使用 CSSTransform 崩溃，所以我推荐 Safari/Chrome/Opera 的视口(viewport)方法作为更可靠的方法。

此外，为了获得视口(viewport)宽度的跨浏览器可靠性，您还必须面对/修复浏览器之间 innerWidth 的整体不一致(注意 documentElement.clientWidth 获得准确的布局像素宽度要可靠得多innerWidth) 并且你还必须处理 devicePixelRatio如 quirksmode.org 表所示的差异。

更新:实际上，在对我自己的 Firefox 问题的解决方案进行了更多思考之后，我发现了一种使用 document.write() 覆盖 Firefox Mobile 中的视口(viewport)的方法。 ，只应用一次:

document.write('<meta name="viewport" content="width='+width+'px,initial-scale='+scale+'">');

刚刚在 Webkit 和 Firefox 中测试成功，没有缩放问题。我无法在 Window Phones 上进行测试，所以我不确定 itf document.write 是否适用于 IEMobile...

关于javascript - 将视口(viewport)设置为缩放以适应宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21419404/

25 4 0
文章推荐： ios - '只有当源 Controller 由 UINavigationController 的实例管理时，才能使用 Push segues
文章推荐： javascript - 在不受支持的浏览器中替代 IndexedDB？ Safari/iOS Saf-Chrome
文章推荐： ios - UITextView 在成为第一响应者时添加新行
文章推荐： ios - iTunesConnect 返回 'nil' 作为 SKProduct 的本地化标题
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com