动态视口

Question

我正在制作一个主要面向iOS的网络应用程序.我想让它在横向和纵向中工作,就好像它是一个原生应用程序(所以没有缩放).我在设置时找到了

<meta name="viewport" content="width = device-width, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">

适用于肖像; device-height是纵向的全高,设备宽度是纵向的全宽.但是,当设备旋转到横向时,Safari仍会尝试在新的横向宽度上强制执行原始宽度(320)(放大320到480).我试过像动态重置视口一样

document.getElementById("viewport").setAttribute('content', 'width = ' + maxWidth + ', height = ' + maxHeight + ', maximum-scale = 1.0, minimum-scale = 1.0');

其中maxHeight和maxWidth是重定向后的新高度/宽度比例,但Safari给出了"undefined; TypeError:"null"不是对象"错误.

我不想为1,以指定每个条件的不同样式表(iphone屏幕,iPhone的Retina屏幕,iPad和iPad上可能很快视网膜)我想保留它通用2.我想它在其他原生工作浏览器也是3.我很懒

所以我希望我有意义......任何人都可以帮助我吗？基本上我想在运行时更改视口以匹配横向/纵向高度.谢谢

编辑:解决方案我正在使用getElementById,但默认情况下viewport没有ID.所以我只是添加了它,它现在有效.

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

但是,它第一次呈现页面(onload)时没有正确设置它.所以我在页面底部添加了一个setOrientation(),以便在页面完全加载后设置方向(第一次)(当将视口设置为窗口大小onload时,它似乎有一些时髦的尺寸).

该解决方案可供稍后对任何可能对此感兴趣的人参考.

谢谢大家!