无论如何在javascript中操作视口？

Posted 2023-03-31

【中文标题】无论如何在javascript中操作视口？

【英文标题】：is there anyway to manipulate viewport in javacript?

【发布时间】：2021-07-20 04:00:52

【问题描述】：

我一直在尝试使用 javascript 来修改视口比例及其属性。检查 visualViewport API 后，它们都是只读数据。有没有办法动态控制视口？比如放大或设置视口的位置。我想放大视口，就好像我是使用 javascript 的捏缩放一样。

我已经检查了上面by using meta-tag 的类似处理方式。但我需要初始化后的功能。也应该移动视口。

【问题讨论】：

听起来你应该explain what you actually want to do 你认为需要视口访问。因为现在感觉就像是XY Problem。

【参考方案1】：

此代码段可能会对您有所帮助。

// Store the meta element
var viewport_meta = document.getElementById('viewport-meta');

// Define our viewport meta values
var viewports = 
        default: viewport_meta.getAttribute('content'),
        landscape: 'width=990'
    ;

// Change the viewport value based on screen.width
var viewport_set = function() 
        if ( screen.width > 768 )
            viewport_meta.setAttribute( 'content', viewports.landscape );
        else
            viewport_meta.setAttribute( 'content', viewports.default );
    

// Set the correct viewport value on page load
viewport_set();

// Set the correct viewport after device orientation change or resize
window.onresize = function()  
    viewport_set();