如何在Safari 9中激活和使用自适应设计模式

01之06

在Safari 9中激活并使用自适应设计模式

©Scott Orgera。

作为当今世界的Web开发人员意味着支持一大堆设备和平台,有时这可能是一项艰巨的任务。 即使设计最完善的代码遵循最新的Web标准,仍然可以发现网站的某些部分可能无法按照您希望他们在某些设备或解决方案中使用的方式进行操作。 面对支持如此广泛场景的挑战时,选择合适的仿真工具是非常宝贵的。

如果你是使用Mac的众多程序员之一,Safari的开发人员工具集一直都派上用场。 随着Safari 9的发布,这一功能的广度已经大大扩展,主要是由于响应式设计模式_,它允许您预览您的网站在不同的屏幕分辨率以及不同的iPad,iPhone和iPod touch上的呈现方式。

本教程详细介绍了如何激活响应式设计模式以及如何将其用于您的开发需求。

首先,打开你的Safari浏览器。

02 06

Safari首选项

©Scott Orgera。

点击位于屏幕顶部的浏览器菜单中的Safari 。 出现下拉菜单时,选择上面示例中圈选的首选项选项 _。

请注意,您可以使用以下键盘快捷键代替上述菜单项: COMMAND + COMMA(,)

03年06月

显示开发菜单

©Scott Orgera。

现在应该显示Safari的首选项对话框,覆盖您的浏览器窗口。 首先,点击位于窗口右上角的齿轮代表的高级图标_。

浏览器的高级首选项现在应该是可见的。 底部是一个选项,附带一个复选框,标记为菜单栏中的显示制作菜单,并在上面的示例中圈出。 点击一次复选框激活此菜单。

04年6月

进入自适应设计模式

©Scott Orgera。

现在,您的Safari菜单中的新选项应该可用,位于屏幕顶部,标记为“ 开发” 。 点击这个选项。 出现下拉菜单时,请选择上面示例中圈出的Enter Responsive Design Mode(进入响应设计模式)

请注意,您可以使用以下键盘快捷键代替上述菜单项: OPTION + COMMAND + R

05年06月

响应式设计模式

©Scott Orgera。

现在应该以响应式设计模式显示活动网页,如上例所示。 通过选择列出的iOS设备之一(如iPhone 6)或其中一种可用的指定屏幕分辨率(如800 x 600),您可以立即查看该页面在该设备上的显示效果或显示分辨率。

除了显示的设备和分辨率之外,您还可以通过单击分辨率图标正上方的下拉菜单来指示Safari模拟不同的用户代理 - 例如来自不同浏览器的用户代理 - 。

06年06月

开发菜单:其他选项

©Scott Orgera。

除了响应式设计模式外,Safari 9的Develop菜单还提供了许多其他有用的选项_下面列出了一些有用的选项。

相关阅读

如果您发现本教程有用,请务必查看我们的其他Safari 9演练。