f***@fastlight.cn
f***@fastlight.cn
  • 发布:2016-10-05 18:56
  • 更新:2016-10-05 18:56
  • 阅读:1440

这样的页面布局该如何写viewport?

分类:Native.js

背景:
使用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,设计图稿本应该自动缩放至全屏,然而并没有放大,只是一个小图孤零零的显示在中间。

求大神帮助,感恩!

2016-10-05 18:56 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复