<!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. SQLSERVER 2008 R2版本密钥（摘）

    开发版32位:MC46H-JQR3C-2JRHY-XYRKY-QWPVM开发版64位:FTMGC-B2J97-PJ4QG-V84YB-MTXX8 工组版:XQ4CB-VK9P3-4WYYH-4HQX3 ...

  2. outline属性

    outline(轮廓)用于设置元素周围的一条线,用于元素边框的外围,可起到突出元素的作用. outline属性所有浏览器都支持,如果规定了 !DOCTYPE,则 IE8 支持 outline 属性. ...

  3. 【Linux】常用命令 lsof查看打开的文件

    Linux系统把软硬件都抽象成文件,所以通过文件可以追踪到很多重要信息,如读取的配置文件.打开的端口等. 下面是常见的用法: 默认测试文件名为text.txt 1,显示打开text.txt的进程: l ...

  4. 定义任务打印gradle下载的jar包位置

    //定义任务打印gradle下载的jar包位置task showMyCache { configurations.compile.each { println it }}

  5. Google Cardboard

    Google Cardboard是谷歌的一个虚拟现实开源项目,旨在使用户可以以一种简单.有趣且廉价的方式体验虚拟现实.用户只需要在Android手机上安装一个Google Cardboard应用,并将 ...

  6. Js Framework

    http://www.mhtml5.com/2012/06/5119.html http://www.mhtml5.com/2012/06/5118.html http://cubiq.org/isc ...

  7. SVN简明使用方法 .

    SVN简明使用方法 TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录.文件保存在中央版本库,除了能记住文件和目录的每次修改以外,版本库非 ...

  8. Delphi 指针大全（光看不练是学不会的）

    大家都认为,C语言之所以强大,以及其自由性,很大部分体现在其灵活的指针运用上.因此,说指针是C语言的灵魂,一点都不为过.同时,这种说法也让很多人产生误解,似乎只有C语言的指针才能算指针.Basic不支 ...

  9. Csharp 简单操作Word模板文件

    原文:Csharp 简单操作Word模板文件 1.创建一个模板的Word文档  Doc1.dot 内容为: To: <Name> Sub:<Subject> Website i ...

  10. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...