iPhone 6 and iPhone 6 Plus
New API support
New Safari features
Going Native with iOS 8
Safari extensions
New web design features
Contents
1 iPhone6 and iPhone 6 Plus
iPhone 6 screens overview
There is an excellent review of iPhone 6 screen sizes at iPhone 6 Screens Demystified
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
Viewport size
iPhone 6 Plus
Viewport size
<meta name="viewport"
content="width=375">
<meta name="viewport"
content="width=414">
iPhone 6 Plus
Device Pixel Ratio
Device Pixel Ratio 320×480 (points)
375×667 (points) 414×736
(points)
Original iPhone iPhone 6 iPhone 6 Plus
render at 1x render at 2x render at 3x
320×480
(pixels)
750×1334 (pixels)
1242×2208 (pixels)
1080×1920 (pixels)
downsampling / 1.15
render at 1x render at 2x
render at 3x
Original iPhone iPhone 6 iPhone 6 Plus
downsampling / 1.15
Icon sizes
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">
Launch Images
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)">
2 New API support
WebGL for 3D canvas
WebGL for 3D canvas
http://fishgl.com
Support IndexedDB
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) { }
High Resolution Time API
High Resolution Time API
window.performance.now();
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);
Web Cryptography API
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() ); }
3 New Safari features
Safari on iOS 8 has new features that might affect how our websites are rendered.
Autocomplete and credit card scan
Autocomplete and credit card scan
Request the Desktop Site for Any Webpage
Request the Desktop Site for Any Webpage
Request Desktop Site Default User Agent
What's happening?
Access Recently Closed Tabs Faster
Access Recently Closed Tabs Faster
Create a Separate Window for Private Browsing
Create a Separate Window for Private Browsing
iOS 7 iOS 8
RSS is alive
RSS is alive
DuckDuckGo is now available as a default search engine
DuckDuckGo is now available as a default search engine
4 Going Native with iOS 8
The new WebView
WKWebKit
5 Safari extensions
6 New web design features
Animated PNG
Animated PNG
Hairline Border
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; } }
SVG Fragment identifiers
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:
http://www.broken-links.com/tests/svg/fragment-identifiers.php
CSS Compositing and Blending
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:
http://codepen.io/bennettfeely/full/csjzd/
http://codepen.io/bennettfeely/full/csjzd/
CSS Shapes
http://codepen.io/adobe/full/Brtdz
Image Source Set
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">
http://www.webkit.org/demos/srcset/
HTML Template Support
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:
Full Screen API for video elements
Full Screen API for video elements document.querySelector("video").webkitEnterFullScreen()
