MENU

如何预览网页在不同尺寸显示屏上的效果

2018 年 11 月 14 日 • 技术分享

一、简介

  该代码可以直接预览你的网页在不同尺寸屏幕上的显示效果,省的你自己手动去调,对于喜欢魔改的同学来说非常实用。

二、干货

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

三、用法

  • 将本页保存为书签,并修改书签名称为自己能记住功能的名字,放置在网址栏下面(为了方便)

  • 修改该书签的URL为上面的JS代码

  • 打开需要预览的网站,然后点击书签即可

四、自定义参数

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

本代码来自:黑冰技术站

- The End -

| 文章标题:如何预览网页在不同尺寸显示屏上的效果

|分享链接:https://eebk.com/136.html

| 版权所有:本文版权归 奕奕博客 所有,转载请注明出处!


返回文章列表 打赏
本页链接的二维码
打赏二维码
0:00