文章目录

手机HTML5 APP 相对屏幕适配工具

无需在写繁琐的响应式代码,完全的relative layout方式。比如把body设置成640px,就完全按照640px来做,甚至可以全部absolute定位来拼凑界面

使用方法在head引入js文件


注意必须在head引入,因为viewport是在页面初始化渲染的时候生效,这个工具通过动态计算比列来实现的相对视口布局

option配置项:


配置项可以填写在引入标签的content属性中。

width:页面设计宽度 默认为480
targetDensitydpi: dpi属性, android4.4以后已经移除
userScalable:是否支持手势缩放 “yes or no”
maximumScale:最大缩放值 “int”
minimumScale:最小缩放值 “int”
如index.html示列中,按照一个固定宽度来设计界面即可

提示:这个方法方便快速开发移动应用,但是完全利用的scale机制,在高分辨率上细腻度没有标准viewport适配效果好。而且随着系统更新支持上可能会有新问题,实际项目建议还是使用标准的viewport来进行屏幕适配

项目地址:https://github.com/TivonJJ/relative-viewport

此文是本站原创,转载请标注作者和链接出处!