它是一个网页多设备同步预览工具。
做网页、写前端、给客户展示网站时,经常需要看看同一个页面在电脑上、手机上、平板上分别长什么样。这个小工具把四种设备框放在一个画布上,每个框里都实时加载同一个网址,改一个地址,四个屏幕一起更新。
它还有个“拖拽摆放”的功能——设备框可以随便移动、缩放、叠放,像摆积木一样,方便拼出一张好看的效果图。
主要能做什么?
四种设备同屏展示:桌面、平板、手机、笔记本,各自带着真实设备外框。
同一个网址,四个屏幕同步显示:改一个地址,全部一起换。
拖拽摆放:设备框可以随意拖动,调整位置和层叠顺序。
缩放设备:每个设备可以单独放大缩小(20%~250%)。
图层调整:上移一层、下移一层,控制谁挡着谁。
屏幕校准:如果网页在设备框里没对齐,可以用滑块微调宽、高、X、Y 位置。
背景设置:12 种背景颜色可选,包括透明棋盘格、白色、浅灰、深灰、黑色、各种浅色系。
设备显隐控制:不想看某个设备,可以一键隐藏,只留想展示的。
更改 URL:可以只改当前选中的设备,也可以一键应用到全部设备。
重置舞台:摆乱了?点一下恢复初始布局。
实时信息面板:显示当前选中的设备类型、URL、缩放比、舞台分辨率。
适合谁用?
前端开发者:快速看响应式布局在不同屏幕下的效果。
UI / 设计师:做设计稿展示时,拼一张多设备效果图。
给客户演示的人:展示“我们的网站手机、电脑都能用”。
写教程的人:讲解响应式设计时,配一张直观的多设备图。
做产品宣传的人:生成一张好看的多端同步展示图。
任何需要看网页在不同设备上效果的人。
用起来是什么感觉?
打开页面,中间是一个大舞台,默认摆好了四个设备:
桌面(左上,最大)
平板(左下,中等)
手机(中下,最小)
笔记本(右下,中等)
每个设备框里都加载着同一个网址(默认是 ahktool.com),看起来像真的设备一样。
底部是操作栏,一排按钮:
设备列表:点开可以勾选显示/隐藏哪个设备
背景设置:点开选背景颜色,选了立刻生效
缩放控制:− / + 按钮,中间显示当前百分比
上移一层 / 下移一层:调整叠放顺序
屏幕校准:弹出一个可拖动的窗口,四个滑块微调屏幕位置和大小
更改 URL:弹出窗口,输入新地址,可以应用到当前设备或全部设备
重置舞台:一切恢复初始状态
操作流程就是:
点一下某个设备,它会亮起蓝色虚线框,表示选中了
拖动它摆到合适位置,用 + / − 调大小
点“更改 URL”换成你想展示的网站
摆好后,就是一张多设备效果图了
选中设备时,下面的信息面板会实时显示它的类型、URL、缩放比。
想重新开始,点“重置舞台”就行。
整体感觉就是 “点一下选中、拖一拖摆好、换地址看效果”,不用装软件、不用截图拼图,摆好就是一张多端预览图。
对需要展示网页在不同设备上效果的人来说,比手动截图拼接方便太多了。