您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文
WEB工程师和设计师必学的10个IOS 8新鲜改变
作者：佚名 责任编辑：admin 更新时间：2022-06-22
@罗罗磊磊 ：喜大普奔，喜极而泣，随着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，Crypto 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图片
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 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%的内容。也许这并不是什么大问题，但是你也许还是得检查下你的网站是否适配。
适配新iPhone，你可以使用下面两段<meta>
<meta name="viewport" content="width=375"> <meta name="viewport" content="width=414">
设备像素比
iPhone 6与 iphone 5一样，像素比都是2，但是另一方面 iPhone 6 401的dpi真实的像素比值应该大约是2.60。为了解决这个问题，苹果又整了个新概念Rendered pixels 渲染像素，如果像素比是3x,那么理论上一个css宽设为414px的屏幕应该拥有1242px的物理像素（现实中是1080px，小了13%）。
因此，如果你使用一个3x的图给高清的安卓设备，同样这样图也会适配 iPhone 6 Plus 但是iPhone 的浏览器在渲染在屏幕之前首先会调整图片大小。
图标大小
iOS特有的图标大小，在 iPhone 6 plus上是180×180，iPhone 6 上则还是老的120×120。
适配iPhone 6 plus，则需要在<head>中加上这段
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
启动图
如果你的webapp有一个启动图，那么你又得增加两行代码适配新 iPhone 了。
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
UA探测
目前位置，所有升级到iOS 8的 iPhone都使用同样的UserAgent，所以我们暂时还没有办法在服务端判断这是什么设备，当然，通过JS和Media Queries我们还是可以通过技巧来判断的。
新的API
两个最重要的Api支持终于登录了iOS，分别是WebGL和IndexedDB，与此同时，Safari也开始支持 Web Cryptography 和 Navigation Timing。
WebGL支持3D模拟，并且是浏览器默认开启。对于游戏开发者来说，这是一个好消息，更加丰富的交互和形式将在网页上出现。
你可以在微软的这个FishGl 测试下 iOS 8 Safarai上进行3D渲染的效果。
IndexdDB是W3C继起用WebSQL后推出的新的标准，随着 iOS支持 IndexedDB，我们能在不同的手机浏览器上使用同一套数据库API。
Navigation Timing API对于web性能优化来说是个好消息。通过这个API我们能过测量更加精准的加载渲染时间，优化网页的用户体验。
Safari新功能
缩放
iPhone处于横屏的时候，iPad（横竖均可），如果你用手指捏放屏幕（比如说你想放大网页），你会进入一个标签预览模式，用起来倒是挺方面，可是可能会与你在网页上使用的gesturechange事件所冲突，如果你要使用自定义缩放事件，首先爱你你得event.preventDefault()来阻止浏览器的默认事件。
取消 MINIMAL-UI
表单自动填写和信用卡扫描功能
Safari如今支持自动补全表单，并且当Safari检测到你要填写的是信用卡的时候他会允许你开启摄像头直接扫描实体信用卡。
于此同时，Safari也支持autocomplete属性，参考 latest spec。这意味着如果你在一个登录页面，Safari可以调用Keychain里的数据自动填写用户名帐号、密码。Luis Abreu写过一篇关于iOS 8安全和隐私相关的文章，推荐可以看看：https://lmjabreu.com
RSS！
如果你的网站提供了RSS订阅，iOS 8用户可以直接在浏览你网页的时候在书签栏打开他。就是那个@图标里面有个订阅的按钮，虽说有点小低调，但好歹还是有嘛 ﾉ( ´ ▽ ` )ﾉ。
工具栏
现在地址栏和工具栏就变成半透明了。在 iOS 7上只有地址栏是半透明的。这意味着初次加载的时候网页可视区域变得更大（包含了底部的工具栏）。
iPad上的更新
iOS 7以后，使用iPhone上的Safari浏览网页，滚动的时候会自动隐藏工具栏（ipad不会），iOS 8 ipad也有了这个细节上的变化（横竖都有）。不同的是，在横向模式的时候，iPad上面还有一小条，iPhone则是全屏。
除此之外，Safari在横屏模式开启侧边栏会保持原有的viewport大小，只会改变aspect-ratio
书签icon和常用网站
Safari终于支持收藏夹里和书签里的网页附带网站的icon图标。当你在地址栏输入关键字搜索的时候，同样会展示网站的icon（ipad刚刚我测试了下没有）
- 上一个程序编程： 20个简单畅快的“全景式”网站布局欣赏
- 下一个程序编程： 26个优雅的蓝色网站设计
