内容发布更新时间 : 2024/9/29 21:30:18星期一 下面是文章的全部内容请认真阅读。

Web开发者和设计师必须要知道的 iOS 8 十个变化

2014-09-29 09:55 罗罗磊磊 luolei.org 字号：T | T

喜大普奔，喜极而泣，喜当爹，随着iPhone 6和iPhone 6 plus的上市，ios 8终于在上周推送更新了。新的设备，新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化。

AD： 2014WOT全球软件技术峰会北京站 课程视频发布

11月21日-22日 与WOT技术大会相约深圳 现在抢票

喜大普奔，喜极而泣，，随着iPhone 6和iPhone 6 plus的上市，ios 8终于在上周推送更新了。新的设备，新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化。

概述

? ? ? ? ? ?

简介 iOS 8 上的 Safari 的更新 iPhone 6 和 iPhone 6 Plus 新 Api 支持 Safari 新功能和支持 iOS 8 原生优化 Safari 插件

? ? ? ?

新的设计 视频增强 iOS 8上的JS Bug 和问题

已经习惯了苹果官方的高冷，这次，苹果依旧没有更新任何与 Safari 或者 iOS 相关的文档，所以下面的所有数据和资料都是基于我自己的测试和 WWDC 上公布的信息。

iOS 8 上的 Safari

? 支持HTML5新APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API，? 混合应用: 更快的、优化的WebView ? 支持滚动 Scroll 事件:终于支持了！ ? 视频播放: 全屏API，元数据API ? HTML模板元素

? Safari 插件:原生App可以以插件的形式读取网页DOM ? 图片:支持Image Source Sets和动态PNGAPNG ? CSS：支持Shapes，支持小数单位

? 浏览器自动填写表单（支持信用卡调用摄像头扫描） ? 网页和本地应用交互：登录数据共享 ? EcmaScript 6 ：部分支持 ? SPDY:支持谷歌家的新网络协议了 ? 文件上传失效了(这是Bug) ? 移除了minimal-ui属性 ?

支持Yosemite上的远程调试

相比其他移动端上的浏览器，iOS 8并没有支持有些功能：

? dp单位的Media queries

? getUserMedia:访问本地硬件设备，捕获音频和视频的Api ? WebRTC:网页即时通信 ? @viewport 声明 ? Datalist ?

WebP图片

Crypto API iPhone 6 和 iPhone6 Plus

iPhone 6 和 iPhone6 Plus 是苹果继 iPhone 5 后的又一款不同尺寸和不同分辨率的设备。iPhone 6 的参数为4.7

寸大小和750×1334物理分辨率的屏幕（dpi 值与iphone 5s 相同），iPhone 6 Plus则

是5.5寸和1080×1920分辨率(401 dpi)的屏幕。不走寻常路的苹果给这两分辨率取名叫Retina HD

屏，嗯哼，比Retina多了一个HD。

对于web开发者来说，不同的不仅仅是尺子上的大小。还包括默认viewport（关乎

width=device-width的设置），像素比（关乎高清图片的应用），icon图标大小和登录页的图片大

小。

尺寸

Viewport’s device-width (in CSS pixels)

iPhone 6 iPhone 6 Plus 4.7” 375

5.5” 414 400 3(近似值)

Viewport’s device-width (Android设备同分辨率参考) 360 Device Pixel Ratio 像素比

2

Rendered Pixels 渲染像素 (默认 viewport size * dpr) 750×1334 1242×2208 Physical pixels 物理像素

750×1334 1080×1920

对于新 iPhone 的屏幕尺寸，推荐一篇文章\ 。

VIEWPORT SIZE

正在读这篇文章的你应该已经知道

直到上周，所有的 iPhone 和 iPod 使用的都是320px的屏幕宽度。iPhone 6 和 Plus 相比前代更加宽，给我们带来了更多的空间，苹果终于决定加宽浏览器宽度了。但是苹果奇葩的是使用了一套特殊的屏幕像素值。大部分4.7~5

寸的安卓设备的viewport宽设为360px，iPhone 6上却是375px，大部分

5.5寸安卓机器（比如说三星Note）的viewport宽为400，iPhone 6 plus 上却是十分怪异的414px

（╮(╯_╰)╭ 苹果你这样折腾是闹哪样啊）。这意味着相比同样尺寸的安卓机器，iPhone 6用户大概要少看4%的内容。也许这并不是什么大问题，但是你也许还是得检查下你的网站是否适配。