iOS 8 is finally here while the new iPhone 6 and iPhone 6 plus will appear in a few days. New APIs appears on scene, as well as new challenges to support the new screen sizes. I’ve been playing with the final version and here you have my findings.

1. For Web Developers and Designers
iOS 8 & iPhone 6
zhong.zhi@163.com 2014-09-23

2. iPhone 6 and iPhone 6 Plus
New API support
New Safari features
Going Native with iOS 8
Safari extensions
New web design features
Contents

3. 1
iPhone6 and iPhone 6 Plus

4. iPhone 6 screens overview
There is an excellent review of iPhone 6 screen sizes at iPhone 6 Screens Demystified

5. iPhone 6 screens overview
iPhone 6
iPhone 6 Plus
Display size
4.7”
5.5”
Viewport’s device-width(in CSS pixels)
375
414
Viewport’s device-width on Android devices width similar display size
360
400
Device Pixel Ratio
2
3
Rendered Pixels(default viewport size * dpr)
750×1334
1242×2208
Physical pixels
750×1334
1080×1920
There is an excellent review of iPhone 6 screen sizes at iPhone 6 Screens Demystified

6. Viewport size
iPhone 6 Plus

7. Viewport size
<meta name="viewport"
content="width=375">
<meta name="viewport"
content="width=414">
iPhone 6 Plus

8. Device Pixel Ratio

9. Device Pixel Ratio
320×480
(points)
375×667
(points)
414×736
(points)
Original iPhone
iPhone 6
iPhone 6 Plus

10. render at 1x
render at 2x
render at 3x
320×480
(pixels)
750×1334
(pixels)
1242×2208
(pixels)
1080×1920
(pixels)
downsampling / 1.15

11. render at 1x
render at 2x
render at 3x
Original iPhone
iPhone 6
iPhone 6 Plus
downsampling / 1.15

12. Icon sizes

13. Icon sizes
<!-- (iPhone 4/5)s --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="retinahd_icon.png">
<!-- (iPhone 6/6 plus)s -->
<link rel="apple-touch-icon-precomposed"
sizes="180x180"
href="retinahd_icon.png">

14. Launch Images

15. Launch Images
<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)">

16. 2
New API support

17. WebGL for 3D canvas

18. WebGL for 3D canvas
http://fishgl.com

19. Support IndexedDB

20. Support IndexedDB
var db;
var request = window.indexedDB.open("newDatabase", 1);
request.onerror = function(event) {
console.log("error: ");
};
request.onsuccess = function(event) {
db = request.result;
console.log("success: "+ db);
};
request.onupgradeneeded = function(event) {
}

23. High Resolution Time API

24. High Resolution Time API
window.performance.now();

27. Navigation Timing API
window.addEventListener("load", function() {
setTimeout(function() {
var timing = window.performance.timing;
var userTime = timing.loadEventEnd - timing.navigationStart;
var dns = timing.domainLookupEnd - timing.domainLookupStart;
var connection = timing.connectEnd - timing.connectStart;
var requestTime = timing.responseEnd - timing.requestStart;
var fetchTime = timing.responseEnd - timing.fetchStart;
// use timing data
}, 0);
}, false);

30. Web Cryptography API

31. Web Cryptography API
var data = new Uint8Array([0x00, 0x01, 0x02, 0x03, 0x04]);
var op = window.polycrypt.digest("SHA-256", data);
op.oncomplete = function(e) {
console.log( "Hash returned: " + e.target.result.toString() );
}

34. 3
New Safari features
Safari on iOS 8 has new features that might affect how our websites are rendered.

35. Autocomplete and credit card scan

36. Autocomplete and credit card scan

37. Request the Desktop Site for Any Webpage

38. Request the Desktop Site for Any Webpage

39. Request Desktop Site
Default User Agent
What's happening?

40. Access Recently Closed Tabs Faster

41. Access Recently Closed Tabs Faster

42. Create a Separate Window for Private Browsing

43. Create a Separate Window for Private Browsing
iOS 7
iOS 8

44. RSS is alive

45. RSS is alive

46. DuckDuckGo is now available as a default search engine

47. DuckDuckGo is now available as a default search engine

48. 4
Going Native with iOS 8

49. The new WebView
WKWebKit

50. 5
Safari extensions

51. 6
New web design features

52. Animated PNG

53. Animated PNG

55. Hairline Border

56. Hairline Border
Standard border syntax: div { border: 1px solid black; } Retina hairline border syntax: @media (-webkit-min-device-pixel-ratio: 2) { div { border-width: 0.5px; } }

58. SVG Fragment identifiers

59. SVG Fragment identifiers
<view id="devil-view" viewBox="0 45 48 40"/>
<view id="monkey-view" viewBox="0 0 48 41"/>
<img src='../images/faces.svg#devil-view'>
<img src='../images/faces.svg#svgView(viewBox(0,45,48,40))'>
SVG code:
HTML code:

61. http://www.broken-links.com/tests/svg/fragment-identifiers.php

62. CSS Compositing and Blending

63. CSS Compositing and Blending
<svg> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="green"/> <circle cx="60" cy="80" r="40" fill="blue"/> </svg>
circle { mix-blend-mode: screen; }
SVG code:
CSS code:

65. http://codepen.io/bennettfeely/full/csjzd/
http://codepen.io/bennettfeely/full/csjzd/

66. CSS Shapes

68. http://codepen.io/adobe/full/Brtdz

69. Image Source Set

70. Image Source Set
<img src="image-src.png"
srcset="image-1x.png 1x,
image-2x.png 2x,
image-3x.png 3x,
image-4x.png 4x">

72. http://www.webkit.org/demos/srcset/

73. HTML Template Support

74. HTML Template Support
<template id="row"> <tr><td><td> </template>
var template = document.querySelector('#row'); var clone = template.content.cloneNode(true); var cells = clone.querySelectorAll('td'); cells[0].textContent = 'Joe'; cells[1].textContent = 'red';
HTML code:
JavaScript code:

77. Full Screen API for video elements

78. Full Screen API for video elements
document.querySelector("video").webkitEnterFullScreen()