移动页面缩放方法之(二)控制HTML
<!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,target-densitydpi=device-dpi"/> <title>无标题文档</title> <style> *{ padding:0; margin:0; } div{ width:1000px; 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; function setStyle(){ for(var name in arguments[0]){ var sName=name.charAt(0).toUpperCase()+name.substring(1); var sValue=arguments[0][name]; this.style['Webkit'+sName]=sValue; this.style['Moz'+sName]=sValue; this.style['Ms'+sName]=sValue; this.style['O'+sName]=sValue; this.style[sName]=sValue; } } top.SetScale=function(width){ this.bOk='orientation' in top?true:false; var resize=this.bOk?'orientationchange':'resize'; this.obj=doc.querySelector('html'); this.obj.style.width=width+'px'; this.viewWidth=top.screen.width; this.viewHeight=top.screen.height; this.initWidth=width; this.scale=1; this.init()[resize](); }; SetScale.prototype={ init:function(){ var width=this.bOk?this.viewWidth:this.obj.clientWidth; this.scale=width/this.initWidth; setStyle.call(this.obj,{ transform:'scale('+this.scale+')', transformOrigin:'left top' }); return this; }, resize:function(){ top.addEventListener('resize',this.init.bind(this),false); }, orientationchange:function(){ var _this=this; top.addEventListener('orientationchange',function(){ var rotate=(top.orientation+90)/90%2; if(!rotate){ _this.scale=_this.viewHeight/_this.initWidth; }else{ _this.scale=_this.viewWidth/_this.initWidth; } setStyle.call(_this.obj,{ transform:'scale('+_this.scale+')', transformOrigin:'left top' }); },false); } }; SetScale.prototype.constructor=SetScale; doc.addEventListener('DOMContentLoaded',function(){ new SetScale(1000); },false); })(parent); </script> </body> </html>
移动页面缩放方法之(二)控制HTML的更多相关文章
- 移动页面缩放方法之(一)控制meta法
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- 移动页面缩放方法之(三)rem布局
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- 关于页面缩放时css错乱的处理方法---之一
这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用 之前虽然写了代码,但是一直没有注意到缩放后页面的 ...
- Spring Security教程之基于方法的权限控制(十二)
目录 1.1 intercept-methods定义方法权限控制 1.2 使用pointcut定义方法权限控制 1.3 使用注解定义方法权限控制 1.3.1 JSR-25 ...
- 详细介绍ASP.NET页面重定向方法
ASP.NET中页面重定向的使用的很频繁,实现方法也有不同,自己也试过几种,现在总结一下. 一.Transfer Execute Redirect重定向方法介绍 1.Server.Transfer方法 ...
- PHP页面跳转到另一个页面的方法
用HTTP头信息重定向到另外一个页面的方法如下: <? if (isset($url)) { Header("HTTP/1.1 303 See Other"); Header ...
- http://localhost/certsrv 错误找不到页面解决方法
http://localhost/certsrv 错误找不到页面解决方法 最近公司需要后台启动安全证书,可安装了“Active Directory证书服务” 后,http://localhost/ce ...
- (实用篇)PHP页面跳转到另一个页面的方法总结
一.用HTTP头信息 也就是用PHP的header函数.PHP里的header函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如声明返回信息的类型("C ...
- PHP生成静态页面的方法
在PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板.缓存 等实现页面静态化,今天就以PHP实例教程形 ...
随机推荐
- redis运行状态图形化监控工具 — RedisLive
在Centos中部署redis运行状态图形化监控工具 — RedisLive 写在前面 前两天看到张善友老师的一篇文章<先定个小目标, 使用C# 开发的千万级应用>,里面给出了一张腾讯 ...
- Canny边缘检测-Wiki
Canny edge dector 由 John F. Canny 在1986年提出. Canny 算法的发展 Canny算法的步骤 2.1 降噪 2.2 寻找图像的亮度梯度 2.3 非极大值抑制 2 ...
- study note -(some good sentence)
There are, however, some disadvantages.However, there may be better ways of tacking this problem. Ho ...
- Election Time
Election Time Time Limit: 1000MS Memory limit: 65536K 题目描述 The cows are having their first election ...
- 关于如何在BCB中使用CodeGuard
作者:深圳虫 来自:深圳虫网本文来自http://www.szbug.com/disparticle.aspID=4 一. 为什么写这篇东西自己在使用BCB5写一些程序时需要检查很多东西,例如内存泄漏 ...
- oracle审计
Orcale审计机制研究 1. 设置审计 1.1. 查看审计状态 SQL>conn /as sysdba; 已连接 SQL>show parameters audit_trail; ...
- Linux Kernel ‘test_root()’函数本地拒绝服务漏洞
漏洞名称: Linux Kernel ‘test_root()’函数本地拒绝服务漏洞 CNNVD编号: CNNVD-201306-432 发布时间: 2013-06-25 更新时间: 2013-06- ...
- [经典] 在未排序数组中返回topK大的数
解法一,排序 先从大到小快排,然后扫前K个返回 时间复杂度:O(NlogN),空间复杂度O(1) 解法二,优先队列 前K个放入优先队列中,与最小堆顶元素比较大小,若大于则删除堆顶并插入:否则跳过 时间 ...
- 动态规划——数位dp
通过先前在<动态规划——背包问题>中关于动态规划的初探,我们其实可以看到,动态规划其实不是像凸包.扩展欧几里得等是具体的算法,而是一种在解决问题中决策的思想.在不同的题目中,我们都需要根据 ...
- tcp dump 截取http
监听命令 sudo tcpdump -w mm.txt -s 0 -A -v tcp dst port 8080 -w mm.txt :把记录下来的数据已二进制格式存储在mm.txt文件内 -w ...