对于许多网站来说，移动设备已经占据了很大一部分（即使不是大多数）在线读者，因此确保您的网站在iPhone或平板电脑上的外观和功能正常至关重要。 有许多服务可提供给定URL的移动布局预览，但是Apple通过OS X El Capitan中的Safari 9使测试网站的移动就绪性变得更加容易。 名为“ 响应式设计模式 ”的新功能可以快速预览各种Apple设备上的网站外观以及常见的移动屏幕分辨率。 运作方式如下。
需要重申的是，响应式设计模式是OS X El Capitan中Safari 9独有的一项新功能，因此您至少需要运行这些版本的浏览器和操作系统才能访问它。 如果您的Mac满足此要求，则需要首先启用Safari的开发人员模式。 为此，请启动Safari，然后在菜单栏中单击Safari 。 然后选择首选项>高级 。
在Safari的“偏好设置”窗口的“高级”选项卡中， 选中标记为“在菜单栏中显示开发菜单”的框。正如该选项名称所暗示的那样，您将看到一个新的“开发”菜单出现在Safari菜单栏中，位于右侧“书签。”
接下来，关闭“ Safari偏好设置”窗口，然后导航到您要在自适应设计模式下测试的网站。 将网站完全加载到浏览器中后，请使用键盘快捷键Command-Option-R ，您会看到浏览器窗口转换为多种移动设备分辨率之一的预览（您也可以通过单击Develop in in访问响应式设计模式Safari菜单栏，然后选择进入响应式设计模式 ）。
Safari响应式设计模式使您可以预览网站在Apple的所有移动设备分辨率上的外观，从3.5英寸的iPhone 4S到12.9英寸的iPad Pro。 用户还可以选择1x，2x或3x“ Retina”分辨率，并更改浏览器代理以模仿大多数流行的浏览器（例如Chrome，Firefox和Edge）的行为。
对于每种设备和屏幕尺寸，用户可以单击设备图标以在纵向和横向之间切换，或者对于支持拆分视图的iPad Air和iPad Pro这样的设备，可以单击以在各种拆分视图布局之间旋转。
尽管Safari响应式设计模式缺少类似的现有工具的某些选项，但直接将其内置到Safari中可以为网页设计师节省大量时间，对于希望确保其移动访问者的网站所有者来说，这是一个很好的学习和测试工具无论屏幕分辨率或大小如何，都能获得最佳体验。
测试完成后，您可以通过关闭浏览器窗口或标签或再次按下快捷键Command-Option-R退出“响应式设计模式”。
