<!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. Zephyr-MQTT

    Zephyr OS 支持MQTT协议,其源码目录在: # cd /zephyr-/samples/net/paho_mqtt_clients/publisher/ # cd /zephyr-1.5.0 ...

  2. 将Excel导入到数据中

    常用的方式的有两种: 1. 通过 Microsoft.Jet.OLEDB.4.0 或  Microsoft.ACE.OLEDB.12.0 Microsoft.ACE.OLEDB.12.0 需要安装 A ...

  3. oracle利用merge更新一表的某列数据到另一表中

    假设你有两张表 t1 表 -------------------------- id |    name   |   pwd 1  |      n1     | t2 表 ------------- ...

  4. ZABBIX安装官方指南

    慢慢,把这块业务要玩熟悉~~~~事前,事中,事后,它都能发挥自己的一些作用. From Zabbix official repository Zabbix SIA provides official ...

  5. 【转】Android：Layout_weight的深刻理解

    原文网址:http://mobile.51cto.com/abased-375428.htm 本文详细介绍了Android布局中Layout_weight的属性,它是用来分配属于空间的一个属性,你可以 ...

  6. 杂题 UVAoj 107 The Cat in the Hat

     The Cat in the Hat  Background (An homage to Theodore Seuss Geisel) The Cat in the Hat is a nasty c ...

  7. Android从网络下载文件

    1.主Activity public class MainActivity extends Activity { private Button download=null; private EditT ...

  8. 由浅入深吃透MVC框架，驯服烂代码

    MVC 已经成为客户端的主流编程框架,相信客户端工程师对它并不陌生,甚至在开发过程中,不通过思考都会自动使用 MVC 框架编程.但在工作过程中,发现许多小伙伴也只是使用 MVC,对于为什么这样使用并不 ...

  9. Geometric Shapes (poj3449多边形相交)

    题意:给你一些多边形的点,判断每个多边形和那些多边形相交,编号按照字典序输出 思路:枚举每个多边形的每条边看是否相交,这里的相交是包括端点的,关键是给你正方形不相邻两个点求另外两个点怎么求,长方形给你 ...

  10. mysql备份数据库

    需求: 1,每天4点备份mysql数据: 2,为节省空间,删除超过3个月的所有备份数据: 3,删除超过7天的备份数据,保留3个月里的 10号 20号 30号的备份数据: #创建shell文件 vim  ...