<!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"/>
<title>无标题文档</title>
<style>
*{
    padding:0;
    margin:0;
}
body{
    background:#000;
}
div{
    width:640px;
    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;
    top.SetScale=function(sWidth){
        this.obj=doc.querySelector('meta[name^=v]');
        this.viewWidth=top.screen.width;
        this.viewHeight=top.screen.height;
        this.initWidth=sWidth;
        this.scale=1;
        this.init()['orientation' in window ?'change':'resize']();
    };
    SetScale.prototype={
        init:function(){
            this.scale=this.viewWidth/this.initWidth;
            this.obj.content='width='+this.initWidth+',initial-scale='+this.scale+',user-scalable=no';
            return this;
        },
        resize:function(){
            var _this=this;
            top.addEventListener('resize',function(){
                _this.scale=top.screen.width/_this.initWidth;
                _this.obj.content='width='+_this.initWidth+',initial-scale='+_this.scale+',user-scalable=no';
            },false);
        },
        change:function(){
            var _this=this;
            top.addEventListener('orientationchange',function(){
                var rotate=(top.orientation+90)/90%2;
                if(!rotate){
                    _this.scale=_this.viewHeight/_this.initWidth;
                    _this.obj.content='width='+_this.initWidth+',initial-scale='+_this.scale+',user-scalable=no';
                }else{
                    _this.scale=_this.viewWidth/_this.initWidth;
                    _this.obj.content='width='+_this.initWidth+',initial-scale='+_this.scale+',user-scalable=no';
                }
            },false);
        },
    };
    SetScale.prototype.constructor=SetScale;
    doc.addEventListener('DOMContentLoaded',function(){
        new SetScale(640);
    },false);
}(parent);
</script>
</body>
</html>

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

  1. 移动页面缩放方法之（二）控制HTML

    <!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. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  5. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

  6. 浏览器内核控制Meta标签说明文档

    浏览器内核控制Meta标签说明文档 原文链接 背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的 ...

  7. js 页面刷新方法

    1.reload方法,该方法强迫浏览器刷新当前页面语法:location.reload([bForceGet])参数:bForceGet,可选参数,默认为false从客户端缓存里取当前页.true,则 ...

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

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

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

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

随机推荐

  1. 理解Javascript 的闭包（closure）

    要理解闭包的概念先从变量的作用域说去 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之 ...

  2. hadoop 2.2.0 集群部署 坑

    注意fs.defaultFS为2..0新的变量,代替旧的:fs.default.name hadoop 2.2.0 集群启动命令:bin/hdfs namenode -formatsbin/start ...

  3. An Attempt to Understand Boosting Algorithm(s)

    An Attempt to Understand Boosting Algorithm(s) WELCOME! Here you will find daily news and tutorials ...

  4. SHell命令总结

    cat  files-to-copy.txt | xargs -i cp {} /tmp

  5. RR 插入不影响

    | test100 | CREATE TABLE `test100` ( `sn` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增编号', `phoneNo` ...

  6. 几种任务调度的 Java 实现方法与比较Timer,ScheduledExecutor,Quartz,JCronTab

    几种任务调度的 Java 实现方法与比较 综观目前的 Web 应用,多数应用都具备任务调度的功能.本文由浅入深介绍了几种任务调度的 Java 实现方法,包括 Timer,Scheduler, Quar ...

  7. （转载）PHP_Memcache函数详解

    (转载)http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/04/19/2021605.html memcache函数所有的方法列表如下: M ...

  8. Delphi 生成excel中的饼图

    生成excel中的饼图 var i,j,m,n,count1:integer; str:string; Jdate:tdatetime; channellist,potBstrtime,potEstr ...

  9. max Sum（简单动态规划）

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 / 给组测试数据 1 7 2 3 -4 -5 6 7 8 一个关键问题 : 什么时候将开始位置重新赋值 即 ...

  10. 双有序队列算法——处理哈夫曼K叉树的高效算法

    算法介绍: 哈夫曼树的思路及实现众所周知,大部分是用堆来维护和实现,这种思路比较清晰,在K比较小的时候处理较快(具体例子接下来再说),而且编程复杂度不是很高,利于应用.但是,其所用的数据结构是树,是在 ...