Multi Screen Test 测试网页在不同装置、萤幕解析度显示效果

Multi Screen Test 测试网页在不同装置、萤幕解析度显示效果

近几年已进入所谓的「多萤时代」,除了电脑外,可能许多人也同时拥有智慧型手机或是平板电脑,为了应付不同的画面大小需要,网页开发者也必须适当修改网页,才能在阅读时不至于发生问题。目前较为普遍运用的技术为为「自适应网页设计PC蛋蛋(Responsive Web Design, 缩写为 RWD)」,也就是能依照不同解析度的浏览装置,自动调整网页布局,进而达到同一版面样式,但可以在电脑、手机、平板电脑上正确阅读的效果。

PC蛋蛋如果要比较「自适应网页设计」在不同尺寸画面的显示效果,其实你不需要準备多个装置来进行实际测试,最简单的方法是拖曳你的浏览器视窗,让它变小、变窄,就能看到网页布局产生变化。

那你或许会问:有没有更合适的工具,能準确测试网页在不同装置的显示情形呢?

利用本文介绍的 ,自由调整视窗大小,查看网页在特定比例的具体显示样式,此外,它还内建多种装置的解析度资料,包含一般桌上电脑、手机、平板电脑、电视等等,选择后就能快速让网页显示于特定大小的画面里,用以测试自适应网页设计可否获得开发者想要的效果。

网站名称:Multi Screen Test网站链结:

使用教学

STEP 1

开启 Multi Screen Resolution Test 工具后,先输入要检测的网站链结,按下 Test 按钮后网页就会显示于画面里。

Multi Screen Test

STEP 2

预设画面大小为 1024 x 600,你可以依照需求直接从上方修改视窗大小,按下 Apply 来检视网页在特定大小的显示效果。

Multi Screen Test

比较特别的是 Multi Screen Test 已经内建许多装置的画面解析度资料,例如从 Mobile 里可以直接切换 iPhone 5、iPhone 6、iPhone 6+ 、4.7” Google Nexus 等手机的画面大小,当然其他还有桌上型电脑、平板电脑、电视等多种类型可以选择。

Multi Screen Test

STEP 3

Multi Screen Test 的操作方法很简单,相信只要去稍微动手使用一下,就能知道它真确实是一个挺方便的开发者辅助工具。如果想测试网页在手机或平板电脑横放时的显示效果,点选上方的「Rotate」就能快速 90 度翻转画面。

Multi Screen Test

值得一试的三个理由:

  1. 无须下载或安装软体,开启浏览器即可使用
  2. 可测试自适应网页设计在不同视窗大小的显示效果
  3. 内建多种桌上电脑、手机、平板电脑和电视画面解析度
赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

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

支付宝扫一扫打赏

微信扫一扫打赏

取消

我们发现您正在使用 AdBlock Plus 或者其他 ABP 类软件屏蔽了广告。本站没有任何互动、动画、讨厌的声音或弹出广告,我们不做这些讨厌的类型的广告!请把 ddmf。net 加入到你的AdBlock Plus软件白名单,万分感谢!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by ,分享从这里开始,精彩与您同在

广西快3 北京快3 贵州快3 安徽快3 贵州快3 贵州快3 江苏快3 贵州快3 江苏快3 PC蛋蛋