记磊博客

发表文章数:263

Vieu商业主题4.6

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
摘要:该代码可以直接预览你的网页在不同尺寸屏幕上的显示效果,省的你自己手动去调,对于喜欢魔改的同学来说非常...

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

效果图

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

代码
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浏览器为例。在收藏管理添加一个网页

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

名字自己写一个,方便记住的
网址填写上面代码
使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享

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

[yx_embed_post ids=1878,1745]

未经允许不得转载:作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 轻刻年轮
原文地址:《使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享》 发布于2018-11-18

分享到:
赞(1) 打赏 生成海报

评论 2

评论前必须登录!

  注册

  1. #0
    qq_avatar

    越是拼了命投入,失败时的反作用力越大。

    记磊2年前 (2018-11-27)来自中国/China 搜狗浏览器 Windows 10 浙江省杭州市 电信
  2. #0

    人只要有了感情就能把别人美化

    管理员记磊博客2年前 (2018-11-27)来自中国/China QQ浏览器  Android 5.1.1 vivo X7 Build/LMY47V 浙江省台州市 移动

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册