webview中viewport固定宽度全屏显示方法

由于一些移动端游戏或互动形式需要使用固定尺寸的布局方式，而项目又需要自适应不同尺寸的屏幕，可以通过设置视口宽度等于固定值让浏览器自动缩放页面的方法来实现。

1	<meta name="viewport" content="width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1">

其中的 width=640 就是网页内容区的宽度，需要在不同手机上刚好全屏显示，target-densitydpi=device-dpi 设置后，css中的1px就会等于物理像素中的1px。
补充：由于safari浏览器不支持 target-densitydpi = device-dpi，所以加入JS代码自动调整缩放比例，调整后的代码：

<meta name="viewport" id="WebViewport" content="width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=no"> 
 
<script language="javascript"> 
    if(screen.width < 640) { 
        document.getElementById('WebViewport').setAttribute('content', 'width=640,initial-scale=' + screen.width / 640 + ',target-densitydpi=device-dpi,minimum-scale=0.1,maximum-scale=1,user-scalable=no'); 
    } 
</script>

前端工具箱

热门标签

webview中viewport固定宽度全屏显示方法

博主推荐

FullPageSilder 移动端全屏滑动插件

前端工具箱

热门标签