超实用!Web工程师和设计师必学的10个iOS8新鲜改变优设网

相比其他移动端上的浏览器,iOS8并没有支持有些功能:

iPhone6和iPhone6Plus是苹果继iPhone5后的又一款不同尺寸和不同分辨率的设备。iPhone6的参数为4.7寸大小和750×1334物理分辨率的屏幕(dpi值与iphone5s相同),iPhone6Plus则是5.5寸和1080×1920<分辨率(401dpi)的屏幕。不走寻常路的苹果给这两分辨率取名叫RetinaHD屏,嗯哼,比Retina多了一个HD。

Viewportsize

适配新iPhone,你可以使用下面两段

设备像素比

iPhone6与iphone5一样,像素比都是2,但是另一方面iPhone6401的dpi真实的像素比值应该大约是2.60。为了解决这个问题,苹果又整了个新概念Renderedpixels渲染像素,如果像素比是3x,那么理论上一个css宽设为414px的屏幕应该拥有1242px的物理像素(现实中是1080px,小了13%)。

因此,如果你使用一个3x的图给高清的安卓设备,同样这样图也会适配iPhone6Plus但是iPhone的浏览器在渲染在屏幕之前首先会调整图片大小。

图标大小

iOS特有的图标大小,在iPhone6plus上是180×180,iPhone6上则还是老的120×120。

适配iPhone6plus,则需要在中加上这段

如果你的webapp有一个启动图,那么你又得增加两行代码适配新iPhone了。

iPhone6对应的图片大小是750×1294,iPhone6Plus对应的是1242×2148。

目前位置,所有升级到iOS8的iPhone都使用同样的UserAgent,所以我们暂时还没有办法在服务端判断这是什么设备,当然,通过JS和MediaQueries我们还是可以通过技巧来判断的。

WebGL支持3D模拟,并且是浏览器默认开启。对于游戏开发者来说,这是一个好消息,更加丰富的交互和形式将在网页上出现。

IndexdDB是W3C继起用WebSQL后推出的新的标准,随着iOS支持IndexedDB,我们能在不同的手机浏览器上使用同一套数据库API。

缩放

iPhone处于横屏的时候,iPad(横竖均可),如果你用手指捏放屏幕(比如说你想放大网页),你会进入一个标签预览模式,用起来倒是挺方面,可是可能会与你在网页上使用的gesturechange事件所冲突,如果你要使用自定义缩放事件,首先爱你你得event.preventDefault()来阻止浏览器的默认事件。

取消MINIMAL-UI

表单自动填写和信用卡扫描功能

Safari如今支持自动补全表单,并且当Safari检测到你要填写的是信用卡的时候他会允许你开启摄像头直接扫描实体信用卡。

RSS!

如果你的网站提供了RSS订阅,iOS8用户可以直接在浏览你网页的时候在书签栏打开他。就是那个@图标里面有个订阅的按钮,虽说有点小低调,但好歹还是有嘛(′▽`)。

工具栏

现在地址栏和工具栏就变成半透明了。在iOS7上只有地址栏是半透明的。这意味着初次加载的时候网页可视区域变得更大(包含了底部的工具栏)。

iPad上的更新

iOS7以后,使用iPhone上的Safari浏览网页,滚动的时候会自动隐藏工具栏(ipad不会),iOS8ipad也有了这个细节上的变化(横竖都有)。不同的是,在横向模式的时候,iPad上面还有一小条,iPhone则是全屏。

除此之外,Safari在横屏模式开启侧边栏会保持原有的viewport大小,只会改变aspect-ratio

书签icon和常用网站

Safari终于支持收藏夹里和书签里的网页附带网站的icon图标。当你在地址栏输入关键字搜索的时候,同样会展示网站的icon(ipad刚刚我测试了下没有)。

跨平台切换

如果你同时使用Mac和iPhone,当你在iPhone上浏览一个网页,你可以在你的Mac上(需要Yosemite)继续阅读(今年WWDC上专门演示了这个功能,还得等到Yosemite的正式更新)。

如果你想让用户在网页上,无经确定,就直接跳转到AppleStore下载你的应用,那是不可能的。想让网页与本地应有之间有交互,iOS8带来更多的便捷性。

新的webview

这次iOS8更新,最令人激动的消息就是混合应用与Mac上共同了一套API,意味着iOS上也能有更多的功能,Mac和iOS的通信交互,还有:

新的webview(WKWebkit)是新框架(WebKit.framework)的一部分,与老的UIWebView并不是完全兼容。但是老的webviwe依旧保留,所以老的webapp还是会使用老的webview。

目前的GM版本(公开版也是一样的)依旧存在本地文件无法上传的bug,对于一些混合应用(例如CordovaPhoneGap)来说,这(多webviwe)算是个好消息。

这就意味着,目前iOS8,拥有4个web引擎,当然,也意味着兼容性和bug都是有差异的。

对于那种包壳应用和webviewe应用来说,这个变化是十分重要的。比如说iOS上的Chrome和Facebook本地应用中的网页应用(我们猎豹的电池医生、手机猎豹也大量应用webview)。根据一份报告,11.5%的iOS流量是来自基于webview的应用。

这次safari新增了很多html5,css3的支持

AnimatedPNG

滚动时差与下拉刷新

这个支持让我们可以做出下拉刷新和无限下拉下载的效果。

小数点单位

Safari现在CSS单位从整数转成了浮点数。这意味着CSS对象模型中诸如offsetTop和ClientWidth可能会取得小数值,之前老的iOS都会返回整数值。

与此同时,这也意味着你可以用半个像素单位了。

div{border-width:0.5px;}CSS合成和变形

从Adobe官网的例子演示来看,似乎变形是生效了,合成并没有生效(我MacChrome也没生效)。

CSS形状

ImageSourceSet

有了解响应式图片的开发者对这个应该不陌生,随着高清屏的普及,针对不同的分辨率做适配是一个需要注意的问题,苹果iOS8支持ImageSourceSetSpec,意味着可以在标签中使用新的属性。

在上面这段代码的例子中,iPhone6Plus的像素比是3x,它会加载superhires.png这张图片,而iPhone5s,iPhone6则会加载hires.png这种图,其余的则加载lores.png。但是遗憾的是,iOS暂时还不支持元素。

HTML模板