<!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>1024 × 600 <small>(mobile)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="600">http://127.0.0.1:8020/contract/index.html</iframe>
</div>
<div class="frame">
<h2>1280 × 800 <small>(small tablet)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1280" height="800">http://127.0.0.1:8020/contract/index.html</iframe>
</div>
<div class="frame">
<h2>1366 × 768 <small>(tablet - portrait)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1366" height="768">http://127.0.0.1:8020/contract/index.html</iframe>
</div>
<div class="frame">
<h2>1440 × 900 <small>(tablet - landscape)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1440" height="900">http://127.0.0.1:8020/contract/index.html</iframe>
</div>
</div>
</body>
</html>
网页大小自适应屏幕分辨率测试代码
最新推荐文章于 2024-04-29 11:17:53 发布