New Features and Bugs of Safari on iOS 7

下面是针对ios7新特性及bug做的调研

（其中也包含大为同学的一些总结和补充）

UI 变化

顶部地址栏和底部工具栏的颜色

• 模糊效果 blur: 15px
• 背景颜色跟随 body 的 background-color。
• 可做：在整体颜色非白色的页面，比如推广页这样需要绚丽效果的页面，将上下栏和内容通过相近或对比的手法融合起来，使这些系统元素也成为设计的一部分。

顶部地址栏和底部工具栏的大小变化和隐藏时机

• 页面往下滚动时，顶部地址栏变矮，底部工具栏隐藏；页面网上滚动时，恢复默认状态。
• 横屏状态下的「全屏」按钮被移除。
• 问题：1. 无监听事件（resize，meida queries） 2. 无触发事件（除非用户去滑动页面，不能主动隐藏工具栏）3. 如果用 iScroll 等 JavaScript 模拟滚动，则无法隐藏工具栏。
• 挑战：难以制作全屏效果的 webapp（HTML 5 游戏等）
• 现有的差例子：豆瓣电影。在横屏下打开页面，内容展示空间很小；竖屏下打开页面，再旋转到横屏，无法再恢复工具栏。

全屏状态的可交互区域

• 全屏状态下，页面底部的横条部分不可操作，如果点击此区域，Safari 的工具栏会弹起。
• 问题：增加了那些将工具栏置于页面地步的 webapp 的操作步长，非常恼人。

页面标题

• iPhone 上标题不会显示。
• iPad 上始终会显示。

视觉元素

• 分享、添加到主屏、书签等按钮都变了，如果原来页面有和此相关的引导元素，需要更新。
• 系统图标大小和形状变了，apple-touch-icon 需要更新（提醒：应提供全尺寸的的图片，现在先上不全，且版本滞后）
• blank page 的收藏栏图标应该也是使用 apple-touch-icon

手势操作

• 左右滑动访问历史记录；顶部下拉通知中心；底部上拉控制中心。
• 问题：原有通过边缘滑动来交互的 webapp，相应操作都失效。
• 现状：除了 Pad 二期有用一个从左往右滑动的手势，其他地方没见到使用。

HTML 5 tags

VIDEO TAG 支持「字幕」

• 多语言，track 标记的 srclang 属性
• 样式支持：::cue 伪类，支持 text-shadow, opacity and outline

其他增加的标记

• progress（进度条）
• output
• meter

删除的标记

• datetime: fallback 到 type="text"

CSS

定位

• *sticky: 解决 iOS 上滚动时无法执行 JasvScript，不能将元素固定在某个位置的问题。之前的解决方法为 iScroll 之类使用 JS 模拟滚动，或者放弃滚动时的实时效果。
• flexbox: 响应式的定位，减少使用浮动。（Android 上支持还不好，先阶段项目中不可使用）
• grid: 网格布局，在平面设计中常使用（项目中现不可用）
• regions：类杂志区域性布局（项目中现不可用）

其他 CSS 改动

• 动态字体：字重、字间距、行距，-apple-system- 前缀，和系统保持一直（现在项目中不必要用）
• 支持 overflow-wrap（CSS3 草案将 word-wrap 改成了overflow-wrap），属性值为 normal / break-word

CSS REGIONS

• 类似杂志

JavsScript APIs

XHR 2.0

• 完全支持（安卓浏览器也已经支持，IE10 以上支持），可使用

CANVAS

• 支持混合模式，即将两个图层按照先后顺序叠加。
• 支持

添加到主屏的 webapp

BUG

• 系统标准的对话框无法弹出。update：7.0.3 已经修复了这个 bug
• 无法打开外部 URI（比如发邮件、打电话、打开其他已经安装的应用），之前客户端「将本吧添加到主屏」的功能因为这个 bug 而失效了。update：7.0.3 已经修复了这个 bug
• 无法和浏览器中的网站共享 cookie，即会存在两份 cookie（不一定算是 bug）
• 使用 Application Cach 时，浏览器的历史记录无效（不一定算是 bug）
• icon 需要更新
• 状态栏：不设置 apple-mobile-web-app-status-bar-style 这个 meta 标记，或者将值设为 default 时，会显示成一个黑条。需要设置成 black 或者 black-translucent

webview 模式中的改进

文本支持「翻页」模式

• 类似 iBooks 中的翻页效果
• myWebView.paginationMode = UIWebPaginationModeLeftToRight;
• myWebView.paginationBreakingMode = UIWebPaginationBreakingModePage;
• myWebView.gapBetweenPages = 50;

NATIVE APP 中的其他改进

• Objective-C 提供 JavaScript Core 运行时，支持标准的 JavaScript 对象。用于执行 JavaScript 代码或者解析 JSON 数据。

转载于:https://www.cnblogs.com/wenshy-tian/p/ios7%e6%96%b0%e7%89%b9%e6%80%a7.html