背景:
使用HBuilder来开发全屏游戏,手机横向,页面尺寸设计为1136x640。
需求:
1.不管是什么尺寸的手机,高度自适应,自动缩放,自动缩放至适合高度,如手机高度为320px,则自动缩小至0.5倍;高度为720px,自动放大至1.125倍。
2. 宽度自动裁剪,如下图,该图为原始设计尺寸
当宽度合适时,就这样缩放到适合大小;当手机宽度较宽时,两侧自动留白;当手机宽度较窄时,两侧自动裁剪,如下图
我尝试着使用viewport来实现这一功能,我是这样写的:
(function(){
var head = document.querySelector("head");
var viewport = document.createElement("meta");
var width = Math.floor(640 * screen.availWidth / screen.availHeight);
viewport.setAttribute("name", "viewport");
viewport.setAttribute("content", "width=" + width + "px,target-densitydpi=device-dpi,user-scalable=no;");
head.appendChild(viewport);
})();
这个viewport在微信H5中可以正常使用(我已经用了很长时间了,没有发现什么问题),打包出来的APP在模拟器当中也是正常的,但是放到手机上就不正常了,看起来这个viewport根本就没起作用,我的手机是小米Note,分辨率1920x1080,设计图稿本应该自动缩放至全屏,然而并没有放大,只是一个小图孤零零的显示在中间。
求大神帮助,感恩!