<!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. uboot main_loop函数分析

    一.概述    main_loop()函数做的都是与具体平台无关的工作.主要包括的工作如下: (1)初始化启动次数限制机制 (2)Modem功能 (3)设置软件版本号 (4)启动延迟 (5)读取命令, ...

  2. 分布式系统间通信之RPC的基本概念(六)

    RPC(Remote Procedure Call Protocol)远程过程调用协议.一个通俗的描述是:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调用本地应用程序中的对象 ...

  3. refreshcontrol 实现下拉刷新的功能

    该组件实现下拉刷新的功能.不过该组件是用在ScrollView的内部的,为ScrollView添加一个下拉刷新的功能.当ScrollView的垂直方向的偏移量scrollY:0的时候,手指往下拖拽Sc ...

  4. TortoiseSVN 的分支合并操作

    今天对svn的分支合并有了兴趣,所以对新建了一个项目练练手. 在网上找了一篇文章做指导: http://www.open-open.com/lib/view/open1346982569725.htm ...

  5. About javascript language

    Core http://www.cnblogs.com/leoo2sk/archive/2010/12/19/ecmascript-scope.html function(arguments) fun ...

  6. InstallShield limited edition 生成单个 setup.exe 安装文件

    1.vs里选中当前Setup项目, 2.在vs工具栏中"配置管理器"的下拉列表里,把"Debug"改为"SingleImage" 3.重新编 ...

  7. BPMN 2.0规范

    .1. BPMN 2.0是什么呢? 业务流程模型注解(Business Process Modeling Notation - BPMN)是 业务流程模型的一种标准图形注解.这个标准 是由对象管理组( ...

  8. 自己做的网页页面导航浏览JS/JQuery

    需求: 当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条! 为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼), ...

  9. 转载：c++ sort用法

    sort函数使用模板: sort包含在头文件algorithm中 sort(start,end,排序方法) 1.在没有排序方法时是默认从小到大的排列,例 #include<iostream> ...

  10. 对List

     class MyCompare implements Comparator//自定义比较方式 要实现Conparator的 compare 方法 {     public int compare(O ...