我有一个网络应用程序,其中响应式布局不是移动设备的选项,所以我尝试使用视口缩放一点,但没有成功这样做.
页面大小为1280×720所以在小屏幕上它应该缩小,在较大的屏幕上放大:
var scale = $(window).width() / 1280; $('head').append('<Meta name="viewport" content="width=device-width,height=device-height,initial-scale=' + scale + ',maximum-scale=' + scale + ',user-scalable=0">');
我只尝试过这个宽度,但结果不是理想的,我做错了吗?
解决方法
我不确定你想要实现什么,但使用以下html
<Meta name="viewport" content="width=1280,initial-scale=1">
以及JS
var siteWidth = 1280; var scale = screen.width /siteWidth document.querySelector('Meta[name="viewport"]').setAttribute('content','width='+siteWidth+',initial-scale='+scale+'');
您应该能够在移动设备上显示初始放大或缩小的页面.你必须检查设备是否在纵向.对于横向,您需要使用screen.height而不是screen.width