使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享-轻刻年轮

图片[1]-使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享-轻刻年轮

效果图

图片[2]-使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享-轻刻年轮

代码

javascript:document.write('
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
<style>
body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
.wrapper { width: 6000px; }
.frame { float: left; }
h2 { margin: 0 0 5px 0; }
iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
</style>
</head>
<body>
<div class="wrapper">
<div class="frame">
<h2>240<span> x 320</span> <small>(mobile)</small></h2>
<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="240" height="320"></iframe>
</div>
<div class="frame">
<h2>320<span> x 480</span> <small>(mobile)</small></h2>
<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
</div>
<div class="frame">
<h2>480<span> x 640</span> <small>(small tablet)</small></h2>
<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
</div>
<div class="frame">
<h2>768<span> x 1024</span> <small>(tablet - portrait)</small></h2>
<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
</div>
<div class="frame">
<h2>1024<span> x 768</span> <small>(tablet - landscape)</small></h2>
<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
</div>
<div class="frame">
<h2>1200<span> x 800</span> <small>(desktop)</small></h2>
<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
</div>
</div>
</body>
</html>
')

食用方法

这里以360浏览器为例。在收藏管理添加一个网页

图片[3]-使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享-轻刻年轮

名字自己写一个，方便记住的
网址填写上面代码
图片[4]-使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享-轻刻年轮

设置好了点击一个网页加载好在点击书签即可预览不同尺寸（尺寸可以修改的）
上面的 js 代码中，下面就对应的每个自适应窗口屏幕参数，自行修改即可。width=”1200″代表宽度1200px，height=”800″代表高度为800px；此外，你可以添加更多屏幕。

[yx_embed_post ids=1878,1745]

购买后下载不了源码或源码功能失效请联系小编，确认后可立即退款，请勿无理投诉

版权声明 1、本网站名称：轻刻年轮
2、轻刻年轮提供的资源仅供您个人用于非商业性目的。
3、本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向客服举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7、本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！。
8、本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！

THE END