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

特别声明:文章分网络转载,个人原创,原创还请著名地址,特殊资源除外,如转载资源有侵权请联系!

摘要:该代码可以直接预览你的网页在不同尺寸屏幕上的显示效果,省的你...

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

效果图

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

代码
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]

  1. 快速获取资源选择支付推荐登录支付-订单可永久保存
  2. 未登录客户支付获取资源后台会使用cookie+IP验证,一样会判断是否已支付
  3. 如果支付后未跳转请联系客服哈付费仅为测试主题稳定开发
  4. 大多资源都可免费下载,评论后也可获取免费哦

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

分享到:
赞(1) 打赏
本文共1709个字,预计阅读时间需要5分钟。
您阅读这篇文章共花了: 0小时00分00秒

评论 2

评论前必须登录!

  注册

  1. #2
    qq_avatar

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

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

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

    管理员记磊博客8个月前 (11-27)来自中国/China QQ浏览器  Android 5.1.1 vivo X7 Build/LMY47V 浙江省台州市 移动
使用浏览器书签预览网站在显示屏显示不同尺寸的效果代码分享

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

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

登录

忘记密码 ?

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

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

注册