<!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. CodeChef FNCS

    题面:https://www.codechef.com/problems/FNCS 题解: 我们考虑对 n 个函数进行分块,设块的大小为S. 每个块内我们维护当前其所有函数值的和,以及数组中每个元素对 ...

  2. winform布局格式

    一.默认布局 ★可以加panel,也可以不加: ★通过鼠标拖动控件的方式,根据自己的想法布局.拖动控件的过程中,会有对齐的线,方便操作: ★也可选中要布局的控件,在工具栏中有对齐工具可供选择,也有调整 ...

  3. ckeditor字数限制

    var maxlength = 200; _editor=CKEDITOR.replace("ckeditor",{height:'130px'}); _editor.on('ke ...

  4. 解决Ext.TextField的AllowBlank不能过滤空格代码

    Ext过滤空格 重写了组件... Ext.apply(Ext.form.TextField.prototype, { validator : function(text) { if (this.all ...

  5. Frequent values

    poj3368:http://poj.org/problem?id=3368 题意:给你一个非下降的序列,然后查询[l,r]内出现最多数字的次数. 题解:首先,因为序列是非下降的,所以相同的数字出现在 ...

  6. 单片机IO处理 电容触摸按键

    原理说明: 通过检测感应按键PAD的电容量变化来判断是否有触摸动作.当手指触摸PAD时,电容量增加,充放电时间变长. 本方案中利用M48的20个双向IO口实现了20个触摸按键,而且所用原器件最少.其中 ...

  7. 我的VSTO之路：序

    原文:我的VSTO之路:序 VSTO是微软提供给.Net开发人员的一个接口,通过他我们可以对Office程序做一些处理.但是这个接口并不尽善尽美,相比微软的很多其他产品,VSTO的稳定性并不好,相关的 ...

  8. IntegerCache详解

    IntegerCache是Integer的内部类,用来将-128——high之间的对象进行实例化 private static class IntegerCache {        static f ...

  9. a great tool for automatically formating your code!

    1. make your own format file at your project's root or file's folder. (The clang-format will automat ...

  10. 组合数学（Pólya计数原理）：UvaOJ 10601 Cubes

    Cubes You are given 12 rods of equal length. Each of them is colored in certain color. Your task is ...