2019-01-25

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>分辨率测试工具</title>
  6. <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. * {margin:0;padding:0;border:0}
  10. body,p,td,div,input,select {font-family:Times,Helvetica,Arial,sans-serif;font-size:16px;letter-spacing:2px;font-style:italic}
  11. body {background:#fff}
  12. .fixed {font-family:Courier;font-style:normal}
  13. input.submit {font-weight:bold}
  14. h1 {font-style:normal;float:left;color:#000;padding-right:20px;padding-top:10px;font-size:50px;line-height:30px;font-family:"Arial Black",Arial,Helvetica;letter-spacing:-2px;font-variant:small-caps}
  15. a:link, a:visited {color:#30f}
  16. a:hover {color:#fff;background:#30f;text-decoration:none}
  17.  
  18. #canvas {padding:10px 20px;background:#eee}
  19. #info {float:left;padding:0 0px 20px 20px}
  20. #footer {padding:10px;border-top:1px dashed #aaa}
  21. input, select {font-size:20px;padding:4px}
  22. select {border:1px solid #666;background:#eee}
  23. .blurred {background:#e8e8e8;color:#666;border:1px solid #999}
  24. .focused {background:#eee;color:#000;border:1px solid #000}
  25. .normal {border-style:solid}
  26. .hovered {background:#eee;border:1px solid #f66}
  27. .button {padding:4px 12px;font-weight:bold}
  28. iframe {border:1px solid #999}
  29. .d {float:left;padding:0px 10px 0px 0}
  30.  
  31. .fluffless h1, .fluffless form,.fluffless #footer, .fluffless #info {display:none}
  32. .fluffless #canvas {background:#fff}
  33. @media projection {
  34. #footer, #info {display:none}
  35. #canvas {background:#fff}
  36. }
  37. </style>
  38.  
  39. <script type="text/javascript">
  40. //<![CDATA[
  41. fluffstate=false
  42.  
  43. function changeStyle(el,classname){
  44. if(el.className)el.className=classname
  45. }
  46.  
  47. function getobject(e){
  48. if(typeof(e)=='object')return(e)
  49. if(document.getElementById)return(document.getElementById(e))
  50. return(eval(e))
  51. }
  52.  
  53. function update_iframe(){
  54. iframe=getobject('iframe')
  55. url=get_url()
  56. if((iframe.src!=url)&&(url!='')){
  57. iframe.src=url
  58. }
  59. iframe.width=getobject('width').value
  60. iframe.height=getobject('height').value
  61. }
  62. function get_url(){
  63. uo=getobject('url')
  64. url=uo.value
  65. if(url!=''){
  66.   if((url.indexOf('.')<0)&&(url.indexOf('/')<0))url+='.com'
  67. if((url.indexOf('/')<0)&&(url.indexOf('\\')<0))url+='/'
  68. if((url.indexOf('://')<0)&&(url.indexOf('\\')<0))url='http://'+url
  69. uo.value=url
  70. }
  71. return(url)
  72. }
  73.  
  74. function change_dims(){
  75. size=getobject('size').value
  76. if(size==1)dims=[240,320]
  77. if(size==2)dims=[320,480]
  78. if(size==3)dims=[640,480]
  79. if(size==4)dims=[800,600]
  80. if(size==5)dims=[1024,600]
  81. if(size==6)dims=[1024,768]
  82. if(size==7)dims=[1280,800]
  83. if(size==8)dims=[1280,1024]
  84. if(size==9)dims=[1366,768]
  85. if(size==10)dims=[1920,1024]
  86. if(size==11){
  87. 	dims=[null,null]
  88. 	getobject('width').value=null
  89. 	getobject('height').value=null
  90. 	return
  91. }
  92. getobject('width').value=dims[0]
  93. getobject('height').value=dims[1]
  94. update_iframe()
  95. }
  96.  
  97. // key handling code
  98. inputfocused='url'
  99. document.onkeypress=handle_keys
  100.  
  101. function handle_keys(ev){
  102. // don't zoom when an input field has focus
  103. if(inputfocused=='url')return(true)
  104. // get the ascii value of the pressed key
  105. e=ev||window.event
  106. key=e.which||e.keyCode
  107.  
  108. width=getobject('width').value
  109. height=getobject('height').value
  110. // bugfix for opera: remove spaces which appear when pressing arrow up
  111. width=width.replace(/[^0-9]*/, '')
  112. height=height.replace(/[^0-9]*/, '')
  113.  
  114. switch(key){
  115. 	case 102:
  116. 		// toggle fluff (key: f)
  117. 		if(fluffstate){
  118. 			fluffstate=false
  119. 			classname=''
  120. 		}else{
  121. 			fluffstate=true
  122. 			classname='fluffless'
  123. 		}
  124. 		document.getElementById('body').className=classname
  125. 		return(false)
  126. 	case 97:
  127. 		// zoom out to next step (a)
  128. 		break
  129. 	case 115:
  130. 		// zoom in to next step (s)
  131. 		break
  132. 	case 40:
  133. 	case 45:
  134. 	case 113:
  135. 		// smooth zoom out (q or -)
  136. 		width=width*.95
  137. 		height=height*.95
  138. 		break
  139. 	case 38:
  140. 	case 43:
  141. 	case 119:
  142. 		// smooth zoom in (+ or w)
  143. 		width=width*1.05
  144. 		height=height*1.05
  145. 		break
  146. 	case 32:
  147. 		// space: cycle through size menu
  148. 		size_object=getobject('size')
  149. 		size=size_object.value
  150. 		size++
  151. 		if(size>9)size=1
  152. 		size_object.value=size
  153. 		change_dims()
  154. 		return(false)
  155. //		document.getElementById('imgzoom').style.width=''
  156. //		document.getElementById('current_size').innerHTML='Original image size'
  157. 	default:
  158. 		if((inputfocused=='width')||(inputfocused=='height')){
  159. 			if((47<key)&&(key<58))return(true) // key was a number - let it be typed into the input box
  160. 			switch(key){
  161. 				// allowed keys when focus is on width or height field:
  162. 				case 8: // backspace
  163. 				case 46: // delete
  164. 				case 9: // tab
  165. 				case 37: // arrow left
  166. 				case 39: // arrow right
  167. 				case 116: // F5
  168. 					return(true)
  169. 					break;
  170. 			}
  171. 			// don't accept illegal keys - return false to stop the input
  172. 			return(false)
  173. 		}
  174. 		// Return 'true' to indicate that the key has NOT been handled
  175. 		return(true)
  176. }
  177.  
  178. width=parseInt(width)
  179. height=parseInt(height)
  180. if(width<20)width=20
  181. if(height<20)height=20
  182. // don't change height if width field has focus
  183. if(inputfocused!='height')getobject('width').value=width
  184. // don't change width if height field has focus
  185. if(inputfocused!='width')getobject('height').value=height
  186.  
  187. update_iframe()
  188.  
  189. // Return 'false' to indicate that the key HAS been handled. This stops Opera's built in zoom on + and -.
  190. return(false)
  191. }
  192.  
  193. function bluritem(e){
  194. e.className=e.className.replace('focused','blurred')
  195. inputfocused=false
  196. }
  197. function focusitem(e){
  198. e.className=e.className.replace('blurred','focused')
  199. e.select()
  200. }
  201. function mouseover(e){
  202. e.className=e.className.replace('normal','hovered')
  203. }
  204. function mouseout(e){
  205. e.className=e.className.replace('hovered','normal')
  206. }
  207. function wopen() {
  208. urlv=getobject('url').value
  209. window.resizeTo(getobject('width').value,getobject('height').value)
  210. if(urlv!='')window.open(urlv,'TestSizePopup','width='+getobject('width').value+',height='+getobject('height').value+',scrollbars=yes,resizable=no')
  211. }
  212.  
  213. //]]>
  214. </script>
  215. <!--[if gte IE 7]>
  216. <script type="text/javascript">
  217. function update_iframe(){
  218. url=get_url()
  219. }
  220. </script>
  221. <![endif]-->
  222.  
  223. </head>
  224.  
  225. <body id="body" onload="getobject('url').focus()">
  226.  
  227. <div id="canvas">
  228.  
  229. <h1>分辨率测试工具 <span style="font-size:12px;letter-spacing:2px;font-variant:normal;font-style:italic;font-weight:normal;font-family:Times;color:#444"><br/>By wanghongli 00197123</span></h1>
  230.  
  231. <form action="./" method="get" id="testsizeform" onsubmit="update_iframe();return(false)">
  232. <!--[if gte IE 7]>
  233. </form>
  234. <form action="./" method="get" id="testsizeformIE">
  235. <![endif]-->
  236.  
  237. <div style="padding:10px;background:#fff;border:1px dashed #999;float:left;margin-bottom:10px">
  238. <div class="d">
  239. 测试网址:<br />
  240. <input type="text" value="http://w3.huawei.com/" style="width:170px" id="url" name="url"
  241. class="normal blurred" onfocus="focusitem(this);inputfocused='url'" onblur="bluritem(this);update_iframe()" onmouseover="mouseover(this)" onmouseout="mouseout(this)" />
  242. </div>
  243.  
  244. <script type="text/javascript">
  245. //<![CDATA[
  246. document.write('<div class="d">\
  247. 分辨率:<br />\
  248. <select id="size" name="size" onchange="change_dims()"\
  249. class="normal" onmouseover="mouseover(this)" onmouseout="mouseout(this)" >\
  250. <option value="1">240x320</option>\
  251. <option value="2">320x480</option>\
  252. <option value="3">640x480</option>\
  253. <option value="4">800x600</option>\
  254. <option value="5" selected="selected">1024x600</option>\
  255. <option value="6">1024x768</option>\
  256. <option value="7">1280x800</option>\
  257. <option value="8">1280x1024</option>\
  258. <option value="9">1366x768</option>\
  259. <option value="10">1920x1024</option>\
  260. <option value="11">自定义</option>\
  261. </select>\
  262. </div>')
  263. //]]>
  264. </script>
  265.  
  266. <div class="d">
  267. Width:<br />
  268. <input type="text" maxlength="4" value="1024" style="width:50px" id="width" name="width" class="normal blurred"
  269.  onfocus="focusitem(this);inputfocused='width'" onblur="bluritem(this)" onmouseover="mouseover(this)" onmouseout="mouseout(this)" />
  270. </div>
  271.  
  272. <div class="d">
  273. Height:<br />
  274. <input type="text" maxlength="4" value="600" style="width:50px" id="height" name="height" class="normal blurred"
  275.  onfocus="focusitem(this);inputfocused='height'" onblur="bluritem(this)" onmouseover="mouseover(this)" onmouseout="mouseout(this)" />
  276. </div>
  277.  
  278. <script type="text/javascript">
  279. //<![CDATA[
  280. document.write('<div class="d">\
  281.  <br />\
  282. <input type="button" id="popup" name="popup" value="确定"\
  283. class="button normal blurred" onfocus="this.className=this.className.replace(\'blurred\',\'focused\')" onblur="bluritem(this)" onmouseover="mouseover(this)" onmouseout="mouseout(this)"\
  284. onclick="wopen()" />\
  285. </div>')
  286. //]]>
  287. </script>
  288.  
  289. <!--[if gte IE 7]>
  290. <script type="text/javascript">
  291. document.write('<div class="d">\
  292.  <br />\
  293. <input type="submit" id="iframerefresh" value="Refresh iframe"\
  294. class="button normal blurred" onfocus="this.className=this.className.replace(\'blurred\',\'focused\')" onblur="bluritem(this)" onmouseover="mouseover(this)" onmouseout="mouseout(this)"\
  295.  />\
  296. </div>')
  297. </script>
  298. <![endif]-->
  299.  
  300. <noscript>
  301. <div class="d">
  302.  <br />
  303. <input type="submit" id="iframerefresh_noscript" value="Refresh iframe"
  304. class="button normal blurred" onfocus="this.className=this.className.replace('blurred','focused')" onblur="bluritem(this)" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
  305.  />
  306. </div>
  307. </noscript>
  308.  
  309. </div>
  310.  
  311. </form>
  312.  
  313. <div style="clear:both">
  314. <br/>
  315. <h3>
  316. 使用说明：请在一个独立窗口中使用该工具，即窗口中只包含本工具这一个页签
  317. </h3>
  318. <iframe id="iframe" src="" width="1024" height="600"></iframe>
  319. </div>
  320.  
  321. </div>
  322.  
  323. </div>
  324.  
  325. </body>
  326. </html>

　　其实，完全可以不用这个工具，强大的Chrome 浏览器devTools里面就有这个调试技巧，由于没有接触移动端开发（菜鸟一枚），也没有系统学习一下浏览器调试技巧，竟然不知道身在金山银山，‘哎，只缘身在此山中’。如下图：

强烈建议学习一下这个chrome开发者工具中文文档

屏幕分辨率测试工具（舍弃）---chrome开发者工具devTools(强烈建议系统学习)的更多相关文章

  1. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  2. 爬虫必备工具-chrome 开发者工具

    在某个网站上,分析和抓取数据,我们用的最多的工具就是 Chrome 开发者工具 01 元素面板 通过元素(Element)面板,我们能查看发哦想抓取页面渲染内容所在的标签.使用什么 CSS 属性(例如 ...

  3. Chrome开发者工具之测试应用

    一.Chrome开发者工具简介 浏览器的开发者工具(DevTools)可以帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还 ...

  4. 前端调试效率低？试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  5. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  6. 前端开发必备之Chrome开发者工具（一）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  7. 前端开发必备之Chrome开发者工具（上篇）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  8. Chrome开发者工具使用指南

    前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...

  9. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

随机推荐

  1. Nacos 配置中心原理分析

    我们从原生SDK代码中入手,可以发现最核心的两行代码: ConfigService configService=); 首先我们先来看 NacosFactory.createConfigService ...

  2. STS安装Drools

    download drools (including "Drools Engine" & "Drools and jBPM tools") from o ...

  3. dp（动态规划之最佳路径+dfs）

    http://acm.hdu.edu.cn/showproblem.php?pid=1078 FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Ot ...

  4. Linux快速访问多个目录

    Linux下实现多个目录之间快速切换 dirs -v # 显示栈目录dirs -c # 清空栈目录 pushd # 加入当前目录pushd director   #  加入指定目录pushd +/-i ...

  5. hdu6351 Beautiful Now （全排列+循环节）

    题目传送门 题意: 给你n和k,你每次能交换n的两个位,问最多k次后的最小和最大值 思路: 考虑到n到1e9,所以可以用全排列来暴力,但是我们不能全排列之前的数位, 因为n中的位数可能相等,那样很难计 ...

  6. XE2再次安装JVCL

    说再次安装,是因为我忘了自己之前写过的方法,装完之后感觉怪怪的,想看看别人是怎么装的,于是用google搜索了一下,才发现之前写过: http://www.cnblogs.com/findumars/ ...

  7. PowerDesigner 使用说明

    1. 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了PowerDesigner 快捷工具栏 palette 不见了,怎么重新打开,找回来呢 上网搜索了一下"powerdesig ...

  8. spark复习笔记(7):sparkstreaming

    一.介绍 1.sparkStreaming是核心模块Spark API的扩展,具有可伸缩,高吞吐量以及容错的实时数据流处理等.数据可以从许多来源(如Kafka,Flume,Kinesis或TCP套接字 ...

  9. ASE Alpha Sprint - backend scrum 2

    本次scrum于2019.11.5再sky garden进行,持续30分钟. 参与人: Zhikai Chen, Jia Ning, Haifeng Chen, Hao Wang 请假: Xin Ka ...

  10. layui在当前页面弹出一个iframe层，并改变这个iframe层里的一些内容

    layer.open({ type: 2, title: "专家信息", area: ['100%', '100%'], content: '/ZhuanJiaKu/AddZhua ...