<!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. Tornado的一个开源社区

    https://link.zhihu.com/?target=http%3A//www.tornadoweb.org/en/stable/ 基于Tornado的一个开源社区 GitHub - shiy ...

  2. 关于Verilog 中的for语句的探讨

    在C语言中,经常用到for循环语句,但在硬件描述语言中for语句的使用较C语言等软件描述语言有较大的区别. 在Verilog中除了在Testbench(仿真测试激励)中使用for循环语句外,在Test ...

  3. Tunnel Warfare

    hdu1540:http://acm.hdu.edu.cn/showproblem.php?pid=1540 题意:给你一列村庄,每个村庄给一个标号,1--n,然后毁掉一些村庄,或者重建几个村庄,重建 ...

  4. UpdateLayeredWindow是炫效果的关键

    自绘——是的,输入框每个字都自己绘制,计算行宽,行高,模拟光标闪烁,处理输入法的各种事件,以及选中,拖动等功能. 支持支持一下,实际上无句柄的,就是多行富文本编辑比较麻烦,其他的,都不复杂.很容易实现 ...

  5. mysql 安装1

    Linux 安装mysql.tar.gz包(2012-09-28 19:25:06) 标签: it 分类: linux学习编 我用的mysql的版本的是:mysql--linux-i686-icc-g ...

  6. Prime Path(素数筛选+bfs)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9519   Accepted: 5458 Description The m ...

  7. awk合并文件一例

    群里的朋友求助: $ cat file1a 1 2 3b 2 3 4c 3 4 5 $ cat file2d 你b 好c 吗 合并两个文件,需要实现: a 1 2 3b 2 3 4 好c 3 4 5 ...

  8. 数学（线性规划）： ZJOI2013 防守战线

    偷懒用的线性规划. #include <iostream> #include <cstring> #include <cstdio> using namespace ...

  9. MVVM模式中WPF数据的完全绑定

    一:截图,描述:将后台代码的姓名.年龄绑定到文本框,单击”增加年龄“--年龄自+1,单击”显示年龄“--弹出年龄的显示对话框,实现了从文本框修改年龄和后台更改年龄并显示到文本框 运行结果和解决方案管理 ...

  10. java实现版本号的比较

    之前比较客户端版本号,一直用的是String.compareTo,知道出现bug之后才明白了它的不完善地方.它的比较方式是按照字符串的比较来执行的,所以它有不正确的地方.举个例子,之前客户端版本号为: ...