RWD 自适应已经是现今网页设计的基本,也因此设计时都会透过调整浏览器的视窗,来查看网页版、行动版的显示状态,不过当网站变复杂,无法使用 RWD 设计时,必须另外开发一个行动版,这时就没办法利用调整视窗来查看,必须进到浏览器的程式码检查进行修改,而这篇就要推荐一个非常方便的免费扩充外挂 Mobile View Switcher ,一键就能网页立刻变行动版显示模式,轻松又简单。
Mobile View Switcher 一键切换桌面版、行动版网页显示的免费扩充外挂
点我进入 Mobile View Switcher 的 Chrome 应用商店页面后,按右上角的 “加到 Chrome”:
上方会跳出这讯息,按 “新增扩充功能” 进行安装:
右上角手机图示就是这扩充外挂,点一下即可把目前页面切换成行动版显示模式:
以我们网站为例,下图示桌面版的画面:
点一下当图示变成黄光,就代表切换成功:
而网页就会立刻变成行动版,不过因为目前是桌面版的宽度,因此照片会被拉宽:
调整视窗后一切就会变成正常。有了这扩充外挂后,想看行动版的显示画面,就不用再修改浏览器程式码,非常简单:
任何网站都支援,Facebook 也行。另外行动版检查完后,记得把网页切换回正常的桌面版,要不然下次开启它一样预设为行动版的显示画面:
根据扩充外挂的说明,显示的行动版画面预设为 iOS 11 的 iPhone,如果你想要其他手机,可以进到选项中修改。而更完整介绍可以点我至开发者的网页。
补充资料
Mobile View Switcher 应用商店安装连结:点我前往