首页 » 脚本推荐 » 简单的JS书签,同时预览网站在不同设备上的效果

简单的JS书签,同时预览网站在不同设备上的效果

谷歌已收录,更新于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书签,可以互相传授下。

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 8 条评论

  1. Chromeba Chromeba说道:

    枂下大佬 可以分享一下知乎检测到ablock插件就提示“我们检测到你可能使用了 AdBlock 或 Adblock Plus,它的部分策略可能会影响到正常功能的使用(如关注)。
    你可以设定特殊规则或将知乎加入白名单,以便我们更好地提供服务。 (为什么?)”这段js+css代码

    1. 枂下 枂下说道:

      话说这玩意,网上很多啊。不过,个人觉得容易引起用户不适。
      先吃饭,看看能不能把知乎的扒下来。::(滑稽)

      1. Chromeba Chromeba说道:

        ithome(it之家)好多网站都用这个。提醒一下访客,并不适那种必须关掉adblock才能看内容的强制手段。谢谢枂下大佬了。::(笑眼)

        1. 枂下 枂下说道:

          https://black1ce.com/script/js-adblock.html

        2. 枂下 枂下说道:

          我现在添加了一个,你看看满意不。你屏蔽下我的广告,看看满意不。还是说非得跟知乎一摸一样

  2. 熊猫小A 熊猫小A说道:

    这个很不错呀,调试的时候有用 :@(鼓掌)

    1. 枂下 枂下说道:

      大佬,突然发现个问题。前台登录,评论起来好方便(不用后台登录再刷新网页了)::(捂嘴笑)

      1. 熊猫小A 熊猫小A说道:

        前台登录就是为了这个 ::(哈哈)

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫