iOS 8 and iPhone 6 for web developers and designers

Download iOS 8 and iPhone 6 for web developers and designers

Post on 24-May-2015

238 views

Category:

Technology

0 download

DESCRIPTION

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. Ive been playing with the final version and here you have my findings.

TRANSCRIPT

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

2. iPhone 6 and iPhone 6 PlusNew API supportNew Safari featuresGoing Native with iOS 8Safari extensionsNew web design featuresContents 3. 1iPhone6 and iPhone 6 Plus 4. iPhone 6 screens overviewThere is an excellent review of iPhone 6 screen sizes at iPhone 6 Screens Demystified 5. iPhone 6 screens overviewiPhone 6iPhone 6 PlusDisplay size4.75.5Viewports device-width(in CSS pixels)375414Viewports device-width on Android devices width similar display size360400Device Pixel Ratio23Rendered Pixels(default viewport size * dpr)750133412422208Physical pixels750133410801920There is an excellent review of iPhone 6 screen sizes at iPhone 6 Screens Demystified 6. Viewport sizeiPhone 6 Plus 7. Viewport sizeiPhone 6 Plus 8. Device Pixel Ratio 9. Device Pixel Ratio320480(points)375667(points)414736(points)Original iPhoneiPhone 6iPhone 6 Plus 10. render at 1xrender at 2xrender at 3x320480(pixels)7501334(pixels)12422208(pixels)10801920(pixels)downsampling / 1.15 11. render at 1xrender at 2xrender at 3xOriginal iPhoneiPhone 6iPhone 6 Plusdownsampling / 1.15 12. Icon sizes 13. Icon sizes 14. Launch Images 15. Launch Images 16. 2New API support 17. WebGL for 3D canvas 18. WebGL for 3D canvashttp://fishgl.com 19. Support IndexedDB 20. Support IndexedDBvar 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) {} 21. High Resolution Time API 22. High Resolution Time APIwindow.performance.now(); 23. Navigation Timing APIwindow.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); 24. Web Cryptography API 25. Web Cryptography APIvar 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() );} 26. 3New Safari featuresSafari on iOS 8 has new features that might affect how our websites are rendered. 27. Autocomplete and credit card scan 28. Autocomplete and credit card scan 29. Request the Desktop Site for Any Webpage 30. Request the Desktop Site for Any Webpage 31. Request Desktop SiteDefault User AgentWhat's happening? 32. Access Recently Closed Tabs Faster 33. Access Recently Closed Tabs Faster 34. Create a Separate Window for Private Browsing 35. Create a Separate Window for Private BrowsingiOS 7iOS 8 36. RSS is alive 37. RSS is alive 38. DuckDuckGo is now available as a default search engine 39. DuckDuckGo is now available as a default search engine 40. 4Going Native with iOS 8 41. The new WebViewWKWebKit 42. 5Safari extensions 43. 6New web design features 44. Animated PNG 45. Animated PNG 46. Hairline Border 47. Hairline BorderStandard border syntax: div { border: 1px solid black; } Retina hairline border syntax: @media (-webkit-min-device-pixel-ratio: 2) { div { border-width: 0.5px; } } 48. SVG Fragment identifiers 49. SVG Fragment identifiersSVG code:HTML code: 50. http://www.broken-links.com/tests/svg/fragment-identifiers.php 51. CSS Compositing and Blending 52. CSS Compositing and Blendingcircle { mix-blend-mode: screen; }SVG code:CSS code: 53. http://codepen.io/bennettfeely/full/csjzd/http://codepen.io/bennettfeely/full/csjzd/ 54. CSS Shapes 55. http://codepen.io/adobe/full/Brtdz 56. Image Source Set 57. Image Source Set 58. http://www.webkit.org/demos/srcset/ 59. HTML Template Support 60. HTML Template Support 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: 61. Full Screen API for video elements 62. Full Screen API for video elementsdocument.querySelector("video").webkitEnterFullScreen()