<!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. C#窗体程序画倾斜一定角度的椭圆

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  2. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  3. DEDECMS-helper小助手扩展

    今天在做DEDE动态调用模板的时候卡住了,后终被强大的互联网解决,记录解决问题的过程,以备后用 可以在/data/helper.inc.php中进行默认小助手初始化的设置,系统默认载入小助手 例如创建 ...

  4. 简述MVC思想 与PHP如何实现MVC

    我相信已经有很多这样的文章了,但是我今天还是愿意把自己的经验与大家分享一下.纯属原创,我也没什么保留,希望对新手有帮助,有说的不对的地方,也欢迎指出. 什么是MVC? 简单的说就是将网站源码分类.分层 ...

  5. Unity3d 跑酷游戏 之Character Controller篇

    unity3d  Character Controller @by  广州小龙 做3D跑酷游戏,也慢慢的学习了一些东西,从开发过程中积累了一些小的知识点跟大家分享一下! 1. 这个Revert按钮的意 ...

  6. 辉哥用的这种方法实现ZABBIX的MYSQL批量监控

    不错的.集中和分布式,总是一对要解决的问题.应该可以再想更好的策略~~ 一.方案需求及思路 因跑MySQL服务的服务器比较多,并且每台服务器可能会运行多个不同端口的数据库,如果单独手动一台一台去修改a ...

  7. PKU 1064 Cable master

    题目链接:点击打开链接 有n段绳子,给定n段绳子的长度,单位为厘米.求能够把这些绳子分成k段的最长的段的长度.题目中的trick是最小是1cm,长度不能小于1cm,因此要转换成int来解,然后二分可以 ...

  8. VIM大作战之C++简易集成编译环境（Windows篇）

    一切都要从这篇文章说起 Vim 实在是精致独特得有点像个林妹妹.但谁要是希望家里也有个林妹妹,光把自家丫头照着绣像打扮打扮是不行的,必须从零开始养成一个.而且就算真能养出来个“天上掉下来”一般的可人儿 ...

  9. linux 里 /etc/passwd 、/etc/shadow和/etc/group 文件内容解释

    •/etc/passwd文件用于存放用户账户信息,每行代表一个账户,每个账户的各项信息用冒号分割,例如: root:x:::root:/root:/bin/bash username:password ...

  10. HDU 5478 Can you find it(数学问题)

    题目大意: 给你  ak1⋅n+b1+ bk2⋅n−k2+1 = 0 (mod C)(n = 1, 2, 3, ...). 要求所有的n都满足上述的式子. 问这样的a,b 有多少对?   分析这个问题 ...