01之06
在Safari 9中激活并使用自适应设计模式
作为当今世界的Web开发人员意味着支持一大堆设备和平台,有时这可能是一项艰巨的任务。 即使设计最完善的代码遵循最新的Web标准,仍然可以发现网站的某些部分可能无法按照您希望他们在某些设备或解决方案中使用的方式进行操作。 面对支持如此广泛场景的挑战时,选择合适的仿真工具是非常宝贵的。
如果你是使用Mac的众多程序员之一,Safari的开发人员工具集一直都派上用场。 随着Safari 9的发布,这一功能的广度已经大大扩展,主要是由于响应式设计模式_,它允许您预览您的网站在不同的屏幕分辨率以及不同的iPad,iPhone和iPod touch上的呈现方式。
本教程详细介绍了如何激活响应式设计模式以及如何将其用于您的开发需求。
首先,打开你的Safari浏览器。
02 06
Safari首选项
点击位于屏幕顶部的浏览器菜单中的Safari 。 出现下拉菜单时,选择上面示例中圈选的首选项选项 _。
请注意,您可以使用以下键盘快捷键代替上述菜单项: COMMAND + COMMA(,)
03年06月
显示开发菜单
现在应该显示Safari的首选项对话框,覆盖您的浏览器窗口。 首先,点击位于窗口右上角的齿轮代表的高级图标_。
浏览器的高级首选项现在应该是可见的。 底部是一个选项,附带一个复选框,标记为菜单栏中的显示制作菜单,并在上面的示例中圈出。 点击一次复选框激活此菜单。
04年6月
进入自适应设计模式
现在,您的Safari菜单中的新选项应该可用,位于屏幕顶部,标记为“ 开发” 。 点击这个选项。 出现下拉菜单时,请选择上面示例中圈出的Enter Responsive Design Mode(进入响应设计模式) 。
请注意,您可以使用以下键盘快捷键代替上述菜单项: OPTION + COMMAND + R
05年06月
响应式设计模式
现在应该以响应式设计模式显示活动网页,如上例所示。 通过选择列出的iOS设备之一(如iPhone 6)或其中一种可用的指定屏幕分辨率(如800 x 600),您可以立即查看该页面在该设备上的显示效果或显示分辨率。
除了显示的设备和分辨率之外,您还可以通过单击分辨率图标正上方的下拉菜单来指示Safari模拟不同的用户代理 - 例如来自不同浏览器的用户代理 - 。
06年06月
开发菜单:其他选项
除了响应式设计模式外,Safari 9的Develop菜单还提供了许多其他有用的选项_下面列出了一些有用的选项。
- 打开页面:允许您在当前安装在Mac上的任何其他浏览器中打开活动网页。
- 用户代理:更改用户代理会导致Web服务器将您的浏览器标识为Safari 9以外的其他浏览器。
- Connect Web Inspector: Safari 9的Web Inspector显示Web页面的所有资源,提供细读CSS信息,DOM度量和结构以及本机源代码的能力。
- 显示错误控制台: “开发”菜单中使用最广泛的选项之一,此控制台显示JavaScript,HTML和XML错误和警告。
- 显示页面源代码:允许您查看和搜索活动网页的源代码。
- 显示页面资源:选择此选项可显示当前页面中的文档,脚本,CSS和其他资源。
- 显示片段编辑器:提供编辑和执行代码片段的能力,而不是完整的页面。 从测试的角度来看,这个功能非常有用。
- 显示扩展生成器:允许您通过相应地打包代码并添加元数据来构建自己的Safari扩展。
- 开始时间线录制:记录WebKit检查器中可查看的所有项目的数量,包括网络请求,JavaScript执行,页面呈现以及用户定义的period_的其他事件。
- 清空缓存:单击此选项将删除Safari中的所有存储缓存,而不仅仅是标准网站缓存文件。
- 禁用高速缓存:禁用高速缓存时,每次访问请求时都会从网站下载资源,而不是使用本地高速缓存。
- 允许来自智能搜索字段的JavaScript:出于安全原因,默认情况下禁用JavaScript ,此功能允许您在Safari的地址栏中输入包含javascript的 URL。
- 将SHA-1证书视为不安全:安全散列算法的缩写,SHA-1散列函数已被证明不如最初认为的那么安全,因此在Safari 9中增加了此选项。
相关阅读
如果您发现本教程有用,请务必查看我们的其他Safari 9演练。
- 如何管理网站推送通知
- 如何将网页导出为PDF文件
- 如何配置Safari 9扩展以自动更新
- 如何使用固定站点功能