移动页面缩放方法之(一)控制meta法
<!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法的更多相关文章
- 移动页面缩放方法之(二)控制HTML
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- 移动页面缩放方法之(三)rem布局
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- 关于页面缩放时css错乱的处理方法---之一
这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用 之前虽然写了代码,但是一直没有注意到缩放后页面的 ...
- 关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- 浏览器内核控制Meta标签说明文档【转】
背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...
- 浏览器内核控制Meta标签说明文档
浏览器内核控制Meta标签说明文档 原文链接 背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的 ...
- js 页面刷新方法
1.reload方法,该方法强迫浏览器刷新当前页面语法:location.reload([bForceGet])参数:bForceGet,可选参数,默认为false从客户端缓存里取当前页.true,则 ...
- PHP页面跳转到另一个页面的方法
用HTTP头信息重定向到另外一个页面的方法如下: <? if (isset($url)) { Header("HTTP/1.1 303 See Other"); Header ...
- (实用篇)PHP页面跳转到另一个页面的方法总结
一.用HTTP头信息 也就是用PHP的header函数.PHP里的header函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如声明返回信息的类型("C ...
随机推荐
- App的token机制
这只是网上看来的后期可能还会修改. 理论版的描述如下: (1) 服务器接收到app发送的用户名和密码后,验证用户名和密码是否正确. 如果错误则返回错误信息. 如果验证正确,生成一个随机的不重复的tok ...
- /proc/sys/net/ipv4/ip_forward
ip地址分公有地址和私有地址,public address是由INIC(internet network information center)负责,这些ip地址分配给注册并向INIC提出申请的组织机 ...
- ubuntu 解压rar
Ubuntu下解压rar文件的方法 一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简单的,只需要两个步骤 ...
- How Much Did It Rain? Winner's Interview: 1st place, Devin Anzelmo
How Much Did It Rain? Winner's Interview: 1st place, Devin Anzelmo An early insight into the importa ...
- unity3d 场景间数据传递
在游戏项目中,常常会使用到用户信息,获取信息当然可以从数据库中获取.但是对场景多的游戏这样做是不正确的,那么我我们就需要再第一次获取用户信息之后, 同时在其它的场景中共享用户数据,避免对服务器增加负担 ...
- ubuntu 查本机 ip地址的命令是什么, 详细信息的?
使用ifconfig命令即可.你一敲进去都出来了
- 【转】Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
原文网址:http://www.cnblogs.com/skywang12345/p/3308556.html 上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具 ...
- 树(最小乘积生成树,克鲁斯卡尔算法):BOI timeismoney
The NetLine company wants to offer broadband internet to N towns. For this, it suffices to construct ...
- 关于sed中的Pattern Space和Hold Space的随笔
首先是一部分概念和示例,这部分转自:http://coolshell.cn/articles/9104.html Pattern Space 第零个是关于-n参数的,大家也许没看懂,没关系,我们来看一 ...
- win7使用USB转串口连接mini2440方法
不想嚼别人吃剩的馍.我只说我自己是怎么痛苦的连上的. 环境设备: window7笔记本,没有串口,装有XP和Ubuntu2个虚拟机(不是必须的,我只是说明一下我的环境) 友善之臂mini2440(含U ...