2019-01-25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>分辨率测试工具</title>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" /><style type="text/css">
* {margin:0;padding:0;border:0}
body,p,td,div,input,select {font-family:Times,Helvetica,Arial,sans-serif;font-size:16px;letter-spacing:2px;font-style:italic}
body {background:#fff}
.fixed {font-family:Courier;font-style:normal}
input.submit {font-weight:bold}
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}
a:link, a:visited {color:#30f}
a:hover {color:#fff;background:#30f;text-decoration:none}#canvas {padding:10px 20px;background:#eee}
#info {float:left;padding:0 0px 20px 20px}
#footer {padding:10px;border-top:1px dashed #aaa}
input, select {font-size:20px;padding:4px}
select {border:1px solid #666;background:#eee}
.blurred {background:#e8e8e8;color:#666;border:1px solid #999}
.focused {background:#eee;color:#000;border:1px solid #000}
.normal {border-style:solid}
.hovered {background:#eee;border:1px solid #f66}
.button {padding:4px 12px;font-weight:bold}
iframe {border:1px solid #999}
.d {float:left;padding:0px 10px 0px 0}.fluffless h1, .fluffless form,.fluffless #footer, .fluffless #info {display:none}
.fluffless #canvas {background:#fff}
@media projection {
#footer, #info {display:none}
#canvas {background:#fff}
}
</style><script type="text/javascript">
//<![CDATA[
fluffstate=falsefunction changeStyle(el,classname){
if(el.className)el.className=classname
}function getobject(e){
if(typeof(e)=='object')return(e)
if(document.getElementById)return(document.getElementById(e))
return(eval(e))
}function update_iframe(){
iframe=getobject('iframe')
url=get_url()
if((iframe.src!=url)&&(url!='')){
iframe.src=url
}
iframe.width=getobject('width').value
iframe.height=getobject('height').value
}
function get_url(){
uo=getobject('url')
url=uo.value
if(url!=''){if((url.indexOf('.')<0)&&(url.indexOf('/')<0))url+='.com'
if((url.indexOf('/')<0)&&(url.indexOf('\\')<0))url+='/'
if((url.indexOf('://')<0)&&(url.indexOf('\\')<0))url='http://'+url
uo.value=url
}
return(url)
}function change_dims(){
size=getobject('size').value
if(size==1)dims=[240,320]
if(size==2)dims=[320,480]
if(size==3)dims=[640,480]
if(size==4)dims=[800,600]
if(size==5)dims=[1024,600]
if(size==6)dims=[1024,768]
if(size==7)dims=[1280,800]
if(size==8)dims=[1280,1024]
if(size==9)dims=[1366,768]
if(size==10)dims=[1920,1024]
if(size==11){dims=[null,null]getobject('width').value=nullgetobject('height').value=nullreturn
}
getobject('width').value=dims[0]
getobject('height').value=dims[1]
update_iframe()
}// key handling code
inputfocused='url'
document.οnkeypress=handle_keysfunction handle_keys(ev){
// don't zoom when an input field has focus
if(inputfocused=='url')return(true)
// get the ascii value of the pressed key
e=ev||window.event
key=e.which||e.keyCodewidth=getobject('width').value
height=getobject('height').value
// bugfix for opera: remove spaces which appear when pressing arrow up
width=width.replace(/[^0-9]*/, '')
height=height.replace(/[^0-9]*/, '')switch(key){case 102:// toggle fluff (key: f)if(fluffstate){fluffstate=falseclassname=''}else{fluffstate=trueclassname='fluffless'}document.getElementById('body').className=classnamereturn(false)case 97:// zoom out to next step (a)breakcase 115:// zoom in to next step (s)breakcase 40:case 45:case 113:// smooth zoom out (q or -)width=width*.95height=height*.95breakcase 38:case 43:case 119:// smooth zoom in (+ or w)width=width*1.05height=height*1.05breakcase 32:// space: cycle through size menusize_object=getobject('size')size=size_object.valuesize++if(size>9)size=1size_object.value=sizechange_dims()return(false)
//      document.getElementById('imgzoom').style.width=''
//      document.getElementById('current_size').innerHTML='Original image size'default:if((inputfocused=='width')||(inputfocused=='height')){if((47<key)&&(key<58))return(true) // key was a number - let it be typed into the input boxswitch(key){// allowed keys when focus is on width or height field:case 8: // backspacecase 46: // deletecase 9: // tabcase 37: // arrow leftcase 39: // arrow rightcase 116: // F5return(true)break;}// don't accept illegal keys - return false to stop the inputreturn(false)}// Return 'true' to indicate that the key has NOT been handledreturn(true)
}width=parseInt(width)
height=parseInt(height)
if(width<20)width=20
if(height<20)height=20
// don't change height if width field has focus
if(inputfocused!='height')getobject('width').value=width
// don't change width if height field has focus
if(inputfocused!='width')getobject('height').value=heightupdate_iframe()// Return 'false' to indicate that the key HAS been handled. This stops Opera's built in zoom on + and -.
return(false)
}function bluritem(e){
e.className=e.className.replace('focused','blurred')
inputfocused=false
}
function focusitem(e){
e.className=e.className.replace('blurred','focused')
e.select()
}
function mouseover(e){
e.className=e.className.replace('normal','hovered')
}
function mouseout(e){
e.className=e.className.replace('hovered','normal')
}
function wopen() {
urlv=getobject('url').value
window.resizeTo(getobject('width').value,getobject('height').value)
if(urlv!='')window.open(urlv,'TestSizePopup','width='+getobject('width').value+',height='+getobject('height').value+',scrollbars=yes,resizable=no')
}//]]>
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
function update_iframe(){
url=get_url()
}
</script>
<![endif]--></head><body id="body" οnlοad="getobject('url').focus()"><div id="canvas"><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><form action="./" method="get" id="testsizeform" οnsubmit="update_iframe();return(false)">
<!--[if gte IE 7]>
</form>
<form action="./" method="get" id="testsizeformIE">
<![endif]--><div style="padding:10px;background:#fff;border:1px dashed #999;float:left;margin-bottom:10px">
<div class="d">
测试网址:<br />
<input type="text" value="http://w3.huawei.com/" style="width:170px" id="url" name="url"
class="normal blurred" οnfοcus="focusitem(this);inputfocused='url'" οnblur="bluritem(this);update_iframe()" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)" />
</div><script type="text/javascript">
//<![CDATA[
document.write('<div class="d">\
分辨率:<br />\
<select id="size" name="size" οnchange="change_dims()"\
class="normal" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)" >\
<option value="1">240x320</option>\
<option value="2">320x480</option>\
<option value="3">640x480</option>\
<option value="4">800x600</option>\
<option value="5" selected="selected">1024x600</option>\
<option value="6">1024x768</option>\
<option value="7">1280x800</option>\
<option value="8">1280x1024</option>\
<option value="9">1366x768</option>\
<option value="10">1920x1024</option>\
<option value="11">自定义</option>\
</select>\
</div>')
//]]>
</script><div class="d">
Width:<br />
<input type="text" maxlength="4" value="1024" style="width:50px" id="width" name="width" class="normal blurred"οnfοcus="focusitem(this);inputfocused='width'" οnblur="bluritem(this)" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)" />
</div><div class="d">
Height:<br />
<input type="text" maxlength="4" value="600" style="width:50px" id="height" name="height" class="normal blurred"οnfοcus="focusitem(this);inputfocused='height'" οnblur="bluritem(this)" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)" />
</div><script type="text/javascript">
//<![CDATA[
document.write('<div class="d">\<br />\
<input type="button" id="popup" name="popup" value="确定"\
class="button normal blurred" οnfοcus="this.className=this.className.replace(\'blurred\',\'focused\')" οnblur="bluritem(this)" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"\
οnclick="wopen()" />\
</div>')
//]]>
</script><!--[if gte IE 7]>
<script type="text/javascript">
document.write('<div class="d">\<br />\
<input type="submit" id="iframerefresh" value="Refresh iframe"\
class="button normal blurred" οnfοcus="this.className=this.className.replace(\'blurred\',\'focused\')" οnblur="bluritem(this)" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"\/>\
</div>')
</script>
<![endif]--><noscript>
<div class="d"><br />
<input type="submit" id="iframerefresh_noscript" value="Refresh iframe"
class="button normal blurred" οnfοcus="this.className=this.className.replace('blurred','focused')" οnblur="bluritem(this)" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)" />
</div>
</noscript></div></form><div style="clear:both">
<br/>
<h3>
使用说明：请在一个独立窗口中使用该工具，即窗口中只包含本工具这一个页签
</h3>
<iframe id="iframe" src="" width="1024" height="600"></iframe>
</div></div></div></body>
</html>

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

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

转载于:https://www.cnblogs.com/zkkysqs/p/10321378.html

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

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

    引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...

  2. 程序员的你是否熟练掌握Chrome开发者工具？

    写在前面 再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈^_^ 回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发 ...

  3. Python基础讲解（二）：chrome开发者工具

    当我们爬取不同的网站是,每个网站页面的实现方式各不相同,我们需要对每个网站都进行分析.那是否有一些通用的分析方法?我分享下自己爬取分析的"套路".在某个网站上,分析页面以及抓取数据 ...

  4. chrome开发者工具的使用

    chrome开发者工具的使用 1.如何调出开发者工具 按F12调出 右键审查(或快捷键Ctrl+Shift+I)调出 2.开发者工具概览 Chrome开发者工具中,调试时使用最多的三个功能页面是:元素 ...

  5. 请参阅：Chrome开发者工具中的悬停状态

    我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...

  6. Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]

    我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...

  7. chrome开发者工具_如何使用Chrome开发者工具查找性能瓶颈

    chrome开发者工具 介绍 (Introduction) As one advances through a software development career, concerns beyond ...

  8. chrome开发者工具功能拾遗：Sources面板篇

    本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...

  9. Chrome开发者工具详解(2)-Network面板

    注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板. ...

最新文章

  1. 基于Hyper-V3.0搭建XenDesktop7之九 部署虚拟应用之模板准备
  2. 计算C#程序执行时间
  3. kohana分析之主程序加载流程
  4. RunLoop总结：RunLoop的应用场景（五）
  5. ES6之路第九篇：Set和Map数据结构
  6. miui游戏驱动程序偏好设置_米粉必看：小米官方教你如何关闭 MIUI 广告 - 小米,MIUI...
  7. java tempfile read_Java资源作为文件
  8. oracle11g db files,oracle11g整个DB迁移
  9. java程序组成_java程序是由什么组成的
  10. Learn OpenGL（五）——定义自己的着色器
  11. [转]Java计时器Timer 使用
  12. 虚拟机单一网卡设置两个IP
  13. python cnn模型_字符级CNN分类模型的实现
  14. usb无线网卡android,台式机轻松上网：教你制作USB无线网卡
  15. 代码女神利用Python网络爬虫爬取淘宝评论区数据（用小本本记下来）
  16. 微信公众号里面使用地图导航
  17. saber软件安装后怎么打开_Saber2016安装包和安装详细安装步骤
  18. Java程序编写----个人所得税计算器编写
  19. JS如何判断滚动条是否滚到底部
  20. 更新setuptools版本的时候又找不到easy-install.pth，导致更新失败

热门文章

  1. 交通常识--高架拥堵成因
  2. Kali中间人攻击（原理）
  3. 《唯美女人帮》开机录制 柳岩秀身材乐当花瓶
  4. Python中的argv
  5. 《Motion Design for iOS》（一）
  6. uni-app实现PDF文件下载功能
  7. python：根据一个列表对另外一个列表排序
  8. 手把手教你！0基础小白也可以使用谷歌服务器搭建自己的博客网站
  9. Chroot隔离文件
  10. 五一放假不想人挤人？下载植物大战僵尸中文版玩起来