<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,target-densitydpi=device-dpi"/>
<title>无标题文档</title>
<style>
*{
    padding:0;
    margin:0;
}
div{
    width:1000px;
    height:500px;
    margin:0 auto;
    line-height:500px;
    font-size:30px;
    text-align:center;
    color:#fff;
    background:red;
}
</style>
</head>

<body>
<div>我是测试的</div>
<script>
;(function(top){
    var doc=top.document;
    function setStyle(){
        for(var name in arguments[0]){
            var sName=name.charAt(0).toUpperCase()+name.substring(1);
            var sValue=arguments[0][name];
            this.style['Webkit'+sName]=sValue;
            this.style['Moz'+sName]=sValue;
            this.style['Ms'+sName]=sValue;
            this.style['O'+sName]=sValue;
            this.style[sName]=sValue;
        }
    }
    top.SetScale=function(width){
        this.bOk='orientation' in top?true:false;
        var resize=this.bOk?'orientationchange':'resize';
        this.obj=doc.querySelector('html');
        this.obj.style.width=width+'px';
        this.viewWidth=top.screen.width;
        this.viewHeight=top.screen.height;
        this.initWidth=width;
        this.scale=1;
        this.init()[resize]();
    };
    SetScale.prototype={
        init:function(){
            var width=this.bOk?this.viewWidth:this.obj.clientWidth;
            this.scale=width/this.initWidth;
            setStyle.call(this.obj,{
                transform:'scale('+this.scale+')',
                transformOrigin:'left top'
            });
            return this;
        },
        resize:function(){
            top.addEventListener('resize',this.init.bind(this),false);
        },
        orientationchange:function(){
            var _this=this;
            top.addEventListener('orientationchange',function(){
                var rotate=(top.orientation+90)/90%2;
                if(!rotate){
                    _this.scale=_this.viewHeight/_this.initWidth;
                }else{
                    _this.scale=_this.viewWidth/_this.initWidth;
                }
                setStyle.call(_this.obj,{
                    transform:'scale('+_this.scale+')',
                    transformOrigin:'left top'
                });
            },false);
        }
    };
    SetScale.prototype.constructor=SetScale;
    doc.addEventListener('DOMContentLoaded',function(){
        new SetScale(1000);
    },false);
})(parent);
</script>
</body>
</html>

移动页面缩放方法之（二）控制HTML的更多相关文章

  1. 移动页面缩放方法之（一）控制meta法

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  2. 移动页面缩放方法之（三）rem布局

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  3. 关于页面缩放时css错乱的处理方法---之一

    这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用 之前虽然写了代码,但是一直没有注意到缩放后页面的 ...

  4. Spring Security教程之基于方法的权限控制（十二）

    目录 1.1     intercept-methods定义方法权限控制 1.2     使用pointcut定义方法权限控制 1.3     使用注解定义方法权限控制 1.3.1    JSR-25 ...

  5. 详细介绍ASP.NET页面重定向方法

    ASP.NET中页面重定向的使用的很频繁,实现方法也有不同,自己也试过几种,现在总结一下. 一.Transfer Execute Redirect重定向方法介绍 1.Server.Transfer方法 ...

  6. PHP页面跳转到另一个页面的方法

    用HTTP头信息重定向到另外一个页面的方法如下: <? if (isset($url)) { Header("HTTP/1.1 303 See Other"); Header ...

  7. http://localhost/certsrv 错误找不到页面解决方法

    http://localhost/certsrv 错误找不到页面解决方法 最近公司需要后台启动安全证书,可安装了“Active Directory证书服务” 后,http://localhost/ce ...

  8. （实用篇）PHP页面跳转到另一个页面的方法总结

    一.用HTTP头信息  也就是用PHP的header函数.PHP里的header函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如声明返回信息的类型("C ...

  9. PHP生成静态页面的方法

          在PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板.缓存 等实现页面静态化,今天就以PHP实例教程形 ...

随机推荐

  1. Asp.net MVC分页实例

    分页是网页基本功能,这里主要讨论在Asp.net MVC环境下分页的前端实现,不涉及后台分页.实现效果如下图显示: Step 1.建立分页信息类 public class PagingInfo { p ...

  2. sqlserver cte递归向上统计

    数据字典如下

  3. 解决Maven中Missing artifact javax.jms:jms:jar:1.1:compile

    搭建好项目后报错: Missing artifact javax.jms:jms:jar:1.1:compile  于POM.xml中 解决方案: 一 :在nexus中配置一个代理仓库     地址为 ...

  4. Android 5.0 技术新趋势

    由于 Android 的版本分裂比较严重,整个新系统升级可能需要一两年甚至更长时间.所以目前使用 Android 5.0 的大部分是喜欢尝鲜的用户,同时现在市场上能够很好支持 Android 5.0 ...

  5. google yeoman

    Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML.CSS.Javascript和图片等前端资源的包管 ...

  6. angular2 学习笔记 (Typescript - Attribute & reflection)

    refer : https://www.npmjs.com/package/reflect-metadata refer : https://www.typescriptlang.org/docs/h ...

  7. Unity3D 3D横版跑酷

    Unity3d  3D横版跑酷系列(Character Controller组件) @广州小龙 目前在做一个3D跑酷的横版游戏,目前说一下 Character Controller组件! 1.Slop ...

  8. TWinControl.SetBounds与TWinControl.UpdateBounds赏析（定义和调用）

    先看它们的函数内容: procedure TControl.SetBounds(ALeft, ATop, AWidth, AHeight: Integer); begin // 虚函数,TWinCon ...

  9. scheme和common lisp 区别

    Scheme and Common Lisp use different names for some of the basic system functions. Many Lisp program ...

  10. Hadoop环境搭建－入门伪分布式配置（Mac OS,0.21.0,Eclipse 3.6）

    http://www.linuxidc.com/Linux/2012-10/71900p2.htm http://andy-ghg.iteye.com/blog/1165453 为Mac的MyEcli ...