<!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. go程序性能优化

    性能优化总结: 1 尽量避免频繁创建对象,即减少&{},new,make的使用2 数组可当切片用,当需要使用切片时,可考虑能使用数组来减少切片的创建3 当某类临时对象被多个协频繁程使用时,可用 ...

  2. 转:理解 PHP 中的 Streams

    本文转自:开源中国社区 [http://www.oschina.net]本文标题:理解 PHP 中的 Streams 本文地址:http://www.oschina.net/translate/und ...

  3. Multiple

    poj1465:http://poj.org/problem?id=1465 题意:给你一个数n(0~4999):以及m个不同十进制的数,问有这些十进制数组成的最小的n的倍数是多少.如果有则输出,没有 ...

  4. Function语义学之member function

    之前我们讲过编译器会对 nonmember functions 进行怎样的扩充和该写,今天我们来讲一下 member functions 函数调用方式 一.Nonstatic Member Funct ...

  5. Entropy （huffman) 优先队列）

    http://acm.hdu.edu.cn/showproblem.php?pid=1053 Huffman问题利用STL中的priority_queue解决: #include<stdio.h ...

  6. Linux kernel ‘fib6_add_rt2node’函数安全漏洞

    漏洞名称: Linux kernel ‘fib6_add_rt2node’函数安全漏洞 CNNVD编号: CNNVD-201307-265 发布时间: 2013-07-16 更新时间: 2013-07 ...

  7. foxmail邮箱在代理环境下不能使用解决方法。

    由于工作原因,在域环境中但是还不是域用户,怎么设置代理也不能使用邮件客户端,幸亏老大给一软件,如下图 安装超级简单,而且软件很小,安装完后重启,基本不用设置就可以使用,前提是你的邮箱客户端要设置代理服 ...

  8. CodeForces 595A

    题目链接: http://codeforces.com/problemset/problem/595/A 题意: 一栋楼,有n层,每层有m户,每户有2个窗户,问这栋楼还有多少户没有睡觉(只要一个窗户灯 ...

  9. web前端开发中Nodejs、Grunt、npm等的介绍、使用

    一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...

  10. SRM 405(1-250pt, 1-500pt)

    DIV1 250pt 题意:以linux系统中文件系统的路径表示方法为背景,告诉你某文件的绝对路径和当前位置,求相对路径.具体看样例. 解法:模拟题,不多说.每次碰到STL的题自己的代码都会显得很sb ...