• 通过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上一模一样,是种很好的缩放方案。

  • 相关阅读:
    关于VS2008单元测试中加载配置文件的问题
    面向对象控与python内存泄漏
    热酷,新的领域,新的发展
    [思想火花]:函数命名及参数
    使用AuthToken架构保护用户帐号验证Cookie的安全性
    竟然遇到取FormAuthentication的值取不出来的情况
    新头衔:热酷高级python软件工程师,你问我去热酷干嘛?
    浅谈滚服游戏如果实现一键合服
    基础
    简介
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426454.html
Copyright © 2020-2023  润新知