打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
通过viewport缩放页面的代码
userphoto

2013.09.18

关注

通过viewport缩放页面的代码

    很多游戏原来在设计的时候,是为pc而设计的,分辨率较高,比如设置宽度为900。这些游戏如果想简单修改就兼容移动终端的话,只能通过设置页面viewport来实现,不用修改任何游戏代码,只简单设置viewport就可兼容移动终端。


封装了一段代码来实现这个功能。


demo地址:http://www.adanghome.com/js_demo/28/


===================================================

(function(){

function ajustViewport(gameWidth,gameHeight,isLandscope){

var viewportNode,

   viewportContent = "",

   ua = window.navigator.userAgent.toLowerCase(),

   _width = isLandscope ? Math.max(window.innerHeight,window.innerWidth) : Math.min(window.innerHeight,window.innerWidth),

   _height = isLandscope ? Math.min(window.innerHeight,window.innerWidth) : Math.max(window.innerHeight,window.innerWidth),

   rate = _width / gameWidth,

   rate2 = _height / gameHeight,

   scalable = ",user-scalable=no",

   width;

if (rate > rate2) {

width = Math.round(_width/rate2);

} else {

width = gameWidth;

}

if (ua.indexOf("android") >= 0) {

viewportContent = "width=" + width + scalable + ",target-densitydpi=320";

}else if(ua.indexOf("ios") >= 0 || ua.indexOf("iphone") >= 0 || ua.indexOf("ipod") >= 0 || ua.indexOf("ipad") >= 0){

viewportContent = "width=" + width + scalable;

}

viewportNode = document.querySelector('meta[name=viewport]');

if(viewportNode){

viewportNode.content = viewportContent;

}else{

viewportNode = document.createElement("meta");

viewportNode.name = "viewport";

viewportNode.content = viewportContent;

document.head.appendChild(viewportNode);

}

}


window.ajustViewport = ajustViewport;

})();

=====================================================


调用的时候,在页尾调用 ajustViewport(gameWidth,gameHeight) ; 即可。由于这种缩放是直接通过设置viewport,改变设备dpi缩放比率实现的缩放,所以所有的像素位置,包括事件位置都和pc上一模一样,是种很好的缩放方案。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
html 常用代码
网页head中加入下面一句代码可以使网站在手机端全屏显示
css中如何使用border属性与display属性
常用meta整理
Meta标签的那些事
H5項目常見問題及注意事項 | The Prodigal son alone
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服