本文最后更新于2018年12月27日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,一起讨论各种问题!

说明

各位伪前端大佬,想必经常F12查看网站,甚至还会用一下chrometoggle工具(就是可以改变屏幕宽度的那个工具),来查看自己网站在不同屏幕分辨率下是否存在bug。今天,枂下站长就给各位带来更简单的操作,同时预览6种分辨率下网站的方法。此外,你可以自己修改本站提供的js脚本,达到自定义N种屏幕宽度的效果。废话到此为止,下面上代码。

js代码

这部分,提供用于添加书签的js代码,接着会给各位提供使用方法。当然,还有更高级的自定义方法。

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>
')

使用方法

分为两个部分,分别有简单使用方法,以及自定义高级使用方法

简单使用

这里,只以Chrome为例,讲解使用方法。首先,将本页面添加书签。然后修改书签的网址为上面的js代码即可。最后,再把书签放到容易找到的地方,这就不用多说了。详情如下图所示。
一个简单的JS书签,可以同时预览网站在不同设备上的效果
一个简单的JS书签,可以同时预览网站在不同设备上的效果
一个简单的JS书签,可以同时预览网站在不同设备上的效果
一个简单的JS书签,可以同时预览网站在不同设备上的效果
一个简单的JS书签,可以同时预览网站在不同设备上的效果
一个简单的JS书签,可以同时预览网站在不同设备上的效果

高级用法

上述js代码中,有六段<div class="frame">项目,下面就对应的每个自适应窗口屏幕参数,自行修改即可。width="1200"代表宽度1200pxheight="800"代表高度为800px;此外,你可以添加更多屏幕。

后续

这种js书签,有时候挺方便的。如果各位有更方便的js书签,可以互相传授下。