Go Web developers and designers have to know about the 80 changes in IOS

Source: Internet
Author: User

Overview
    • Introduction to the update for Safari on IOS 8
    • iphone 6 and iphone 6 Plus
    • New API Support
    • New features and support for Safari
    • IOS 8 Native optimization
    • Safari Plugin
    • The new design
    • Video Enhancements
    • JS on IOS 8
    • Bugs and issues

has become accustomed to Apple's official high-cold, this time, Apple still does not update any Safari or IOS-related documents, so all the data and materials below are based on my own tests and information published on the WWDC.

Safari on IOS 8
    • Support HTML5 new APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API, Crypto API
    • Hybrid applications: Faster, optimized WebView
    • Support for scrolling Scroll events : finally supported!
    • video playback : full-screen API, meta-data API
    • HTML Template elements
    • Safari plugin: Native app can read web Dom as plugin
    • images : Support Image Source Sets and dynamic PNGAPNG
    • CSS: Support Shapes , fractional units supported
    • The browser automatically fills in the form (supports credit card calls camera scan)
    • Web and local app interaction : sign-in data sharing
    • EcmaScript 6: Partial support
    • SPDY: Support the new Internet protocol for Google home
    • File upload is invalid (this is a bug)
    • Remove minimal-ui properties from
    • YosemiteRemote debugging on support

IOS 8 does not support some features compared to other browsers on the mobile side:

    • of the DP unitMedia queries
    • Getusermedia: Accessing local hardware devices, capturing audio and video APIs
    • WebRTC: Web Instant Messaging
    • @viewport statement
    • Datalist
    • WEBP Pictures
IPhone 6 and IPhone6 Plus

iphone 6 and IPhone6 Plus are another device with different sizes and resolutions after Apple's iphone 5. The iphone 6 has parameters for the 4.7寸 size and 750×1334 physical resolution of the screen (the DPI value is the same as the iphone 5s), and the iphone 6 Plus is the 5.5寸 screen with a 1080×1920 resolution (401 dpi). The apples do not take the usual road to the two-resolution name Retina HD屏 , hum, than Retina one HD .

For web developers, the difference is not just the size of a ruler. It also includes the default viewport (related width=device-width settings), like Silverhalide (for apps with high-definition images), icon size and the size of the login page's picture.

iphone 6 iphone 6 Plus
Size 4.7 " 5.5 "
Viewport ' s device-width (in CSS pixels) 375 414
Viewport ' s Device-width (Android device with resolution Reference) 360 400
Device Pixel Ratio pixel ratio 2 3 (approximate value)
Rendered Pixels render pixels (default viewport size * DPR) 750x1334 1242x2208
Physical pixels physical pixels 750x1334 1080x1920

For the screen size of the new iphone, an article "IPhone 6 Screens demystified" is recommended.

VIEWPORT SIZE

Are reading this article you should already know

Until last week, all the iphones and ipods were using the 320px screen width. The IPhone 6 and Plus are wider than the previous generation, giving us more space, and Apple has finally decided to widen the browser width. But the wonderful Apple is using a special set of screen pixel values. Most Android 4.7~5寸 devices are wide, viewport 360px but on the iphone 6 375px , most 5.5寸 Android machines (such as Samsung Note) are viewport wide 400 , and the iphone 6 Plus is quite bizarre 414px (╮ (╯_ ╰) ╭ Apple How do you make such a fuss? This means that IPhone 6 users probably have less to look at than Android machines of the same size 4% . Maybe it's not a big problem, but you might want to check to see if your site fits.

For a new iphone, you can use the following two paragraphs<meta>

<meta name="viewport" content="width=375"><meta name="viewport" content="width=414">
Device pixel ratio

The iphone 6 is the same as the iphone 5, like Silverhalide 2 , but on the other hand the 401 real pixel ratio of the iphone 6 dpi should be about 2.60 . To solve this problem, Apple has a new concept rendered pixels 渲染像素 , if like Silverhalide 3x , then theoretically a CSS width set to 414px the screen should have 1242px the physical pixels (1080px in reality, 13% smaller).

So if you use a 3x diagram for an Android device of high-definition, the same picture will fit the iphone 6 Plus but the iphone's browser will resize the image first before rendering it on the screen.

Icon size

iOS-specific icon size, on iphone 6 Plus 180×180 , iphone 6 is still old 120×120 .

With iphone 6 Plus, you'll need to add this

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">  
Start diagram

If your webapp has a launch map, you'll have to add two lines of code to fit the new IPhone.

The image size of the iphone 6 corresponds 750×1294 to that of the iphone 6 1242×2148 Plus.

<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 Detection

The current location, all the iphone upgrade to iOS 8 use the same UserAgent , so we have no way to determine the service side of what this device, of course, through JS and Media Queries we can still be judged by the technique.

The new API

Two of the most important API support is finally signed in to iOS, respectively, WebGL and IndexedDB , at the same time, Safari is also starting to support Web cryptography and navigation Timing.

WebGL3D emulation is supported, and the browser is enabled by default. For game developers, this is good news, and richer interactions and forms will appear on the Web page.

You can perform 3D rendering on IOS 8 Safarai with this FISHGL test from Microsoft.

indexddb is the WebSQL new standard introduced after the launch, with iOS support IndexedDB , we can use the same set of database APIs on different mobile browsers.

The Navigation Timing API is a good news for Web performance optimization. Through this API we can measure more accurate load rendering time and optimize the user experience of the Web page.

New features for Safari zoom

When the iphone is on a horizontal screen, the IPad (or both), if you pinch the screen with your finger (for example, if you want to enlarge the page), you'll get into one, which is pretty much the same, 标签预览模式 but it might conflict with the events you use on the page, gesturechange if you want to use custom scaling events, First I love you you have event.preventDefault() to stop the default browser event.

Cancel Minimal-ui

Six months ago, Apple launched minimal UI mode iOS 7.1 to add minimal-ui properties to the META tag, hide the address bar and navigation bar when the page was loaded, and the IOS 8 update to cancel this, still high-cold goddess fan, did not say why.

Form Auto-fill and credit card scanning function

Safari now supports auto-complete forms, and when Safari detects that you're filling out a credit card, he will allow you to turn on the camera and scan the physical credit card directly.

At the same time, Safari also supports autocomplete attributes, refer to latest spec. This means that if you are on a login page, Safari can call the data in keychain to automatically fill in the username and password. Luis Abreu has written an article about security and privacy for iOS 8, and it's recommended to see

Rss!

If your site offers RSS feeds, IOS 8 users can open the bookmark bar directly while they are browsing your page. is the @ icon inside there is a 订阅 button, although a little low-key, but somehow still have it? (´▽ ')?

Tool bar

Now the Address bar and toolbar become translucent. Only the address bar is semi-transparent on IOS 7. This means that the visual area of the Web page becomes larger when it is first loaded (including the toolbar at the bottom).

Updates on the ipad

After iOS 7, use Safari on your iphone to browse the Web, automatically hide the toolbar when scrolling (ipad does not), and iOS 8 ipad with this change in detail (all in all). The difference is that in landscape mode, there is a small piece on the ipad and the iphone is full screen.

In addition, Safari opens the sidebar in landscape mode to maintain its original viewport size and will only changeaspect-ratio

Bookmark icon and Popular websites

Safari finally supports the icon icons for websites attached to favorites and pages in bookmarks. When you enter a keyword search in the address bar, it will also show the icon for the website (the ipad has just been tested).

Cross-platform switching

If you use Mac and iphone at the same time, when you browse a webpage on your iphone, you can continue reading on your Mac (need Yosemite) (this feature is specifically shown on WWDC this year, and you'll have to wait until Yosemite's official update).

More like native's WebApp.

If you want users to go to the Apple Store and download your app without any certainty on the page, it's not possible. IOS 8 brings more convenience when you want to interact with your Web page and local due.

    1. Safari Plugin
    2. Shared authentication (the ability to share security credentials between web and on-premises applications without having to sign in again).
The new WebView

The most exciting message of the iOS 8 update is that hybrid apps and Macs have a common set of APIs, meaning more features on iOS, communication between Mac and iOS, and:

    1. Supports interaction between JavaScript and postMessage on-premises apps
    2. New classes Configure the Web view similar to the power we had on Android ' s Web view. (Who can translate this paragraph)
    3. More powerful Nitro engine compared to the previous generation 4x speed of JS execution speed.

The new WebView (Wkwebkit) is part of the new Framework (Webkit.framework) and is UIWebView not fully compatible with the old. But the old webviwe still remain, so the old WebApp will still use the old WebView.

The current version of GM (the public version is the same) there are still local files can not be uploaded, for some mixed applications (such as Cordova PhoneGap), this (multi-webviwe) is a good news.

This means that IOS 8 now has 4 web engines, and of course, there are differences between compatibility and bugs.
1. Safari
2. Web.app (using Full-screen desktop app)
3. UIWebView (old)
4. Wkwebview (New)

You can test your WebApp performance here at html5test.com.

This change is important for shell applications and Webviewe applications. For example, Chrome on iOS and Web Apps in Facebook's local app (Our Cheetah battery doctor, mobile Cheetah is also heavily used by WebView). According to a report, 11.5% The iOS traffic is from based on webview the app.

Safari Plugin

Safar on IOS 8 is the first pre-installed browser that supports plug-ins and extensions (Firefox OS may also be a one). Starting with iOS 8, native apps can be extended to interact with Safari, primarily in two ways: share (Share extension) and actions (actions). The Action can interact with the DOM, meaning that the DOM element can be modified directly by the local app.

All plug-ins require the user to actively choose to trigger (need to click on the different buttons in the share to trigger), temporarily do not have a plugin to automatically run.

Legacy Safari's Share menu is also replaced by JavaScript-based plugins. For example, 添加到桌面 now is a section of the JS code in Safari.

In addition to the features that Apple has demonstrated on WWDC, this improvement in safari means that surfing the web can be a great experience. For example, you can directly call 1Password or Lastpassword saved account password in Safari login, if your iphone has Touch ID fingerprint identification, you can even directly fingerprint authentication login.

Pocket.com has announced that it will soon launch a plugin for IOS 8.

Front-end and designer benefits

This time Safari has added a lot of HTML5,CSS3 support

    • CSS Shapes
    • CSS Object-fit
    • CSS Background Blend Modes
    • Word-spacing
    • CSS Compositing and Blending
    • Subpixel Layout Support decimal point
    • Animated PNG supported apng format pictures
    • Parallax Effects and Pull-to-refresh supported (related to scroll events)
    • SVG fragments Identifiers (for SVG Sprites)
    • Image Source Set Support
    • HTML Template Support
Animated PNG

The apng format is an extension of PNG bitmap animations, but not officially approved by the PNG organization, a bit like GIF (except that GIF is JPG-based), which means we can make 32-bit full-color, translucent, dynamic graphs.

Scrolling time difference and drop-down refresh

If you have done a mobile project, you must know iOS7 and previously do not support scrooll events, iOS 8 finally support scrolling events, this can finally be used on iOS on the visual roll-related JS and CSS, but not guaranteed to fully fit.

This support allows us to make a drop-down refresh and unlimited pull-down download effects.

Small points Unit

Safari now turns CSS units from integers to floating-point numbers. This means that in the CSS object model offsetTop , such as and ClientWidth possibly small values are obtained, older iOS will return an integer value.

At the same time, this also means that you can use half a pixel unit.

div {     border-width: 0.5px;}
SVG Fragment Identification

SVG did not play much, this attribute also do not understand, we first look at English bar.

Fragment identifiers from SVG are a method to link to one specific Fragment or portion of an SVG instead of the root elemen T. This feature allow us-to-sprite SVG images in one file taking advantage of one HTTP request and caching. Similar to CSS Sprites, but with SVG images instead and with IDs instead of positions.

CSS Compositing and morphing

Using mix-blend-mode This new property allows us to synthesize different elements of different shapes into a single image, which is a new feature of Adobe's HTML5. On their website you can see demos and documentation of the demo.

From the example shown on the Adobe website, it seems that the morph is in effect and the composition is not in effect (my Mac chrome is not in effect).

CSS shapes

CSS shapes are also a new feature of Adobe. For this feature, the "CSS Shapes 101" on W3cplus is recommended. Individuals are still very optimistic about the promotion and application of this feature, can bring more possibilities for our web design.

Image Source Set

The developers who understand the responsive picture should be familiar with this, with the popularity of HD screens, adapting to different resolutions is a concern, Apple iOS 8 support Image Source Set Spec , meaning you can use the new attributes in the tag.

In the above code example, the pixel ratio of the iphone 6 Plus is 3x , it will load superhires.png this image, and iphone 5s,iphone 6 will load hires.png the graph, the rest is loaded lores.png . Unfortunately, IOS doesn't support elements for the time being <picture> .

HTML templates

<template>Useful for WebApp, which <template> can contain css a paragraph or js (will not be parsed by the browser), in the actual application, we can use <template> the code in the creation of a new node .

Video Enhancements

This update has a lot to do with video playback, IOS8 began to support 全屏播放 , Meta Data Api and (as CSS layering you know, HTML5 video elements can be controlled by CSS?). )

Full-screen playback of the video element

Safari does not support full-screen playback APIs, even iOS8 is no exception. But it is possible to solve this problem in a special way by adding a paragraph to the <video> element js .

<input type="button" value="Go Full screen"  onclick=‘document.querySelector("video").webkitEnterFullScreen()‘>  
Video Metadata API

Safari starts with <video> support preload="metadata" that allows the browser to trigger events for loadedmetadata Easy developer control.

CSS Layering

I can control other elements by CSS before putting them in <video> .

IOS 8 JavaScript related
    • Part of the support, including,,, ECMAScript 6 Promises , and Iterators Maps For-of Weak Maps so on.
    • run in the background: JavaScript will continue to run in the background (even if the window has been switched or safari has switched to the background, but the timer times has dropped to 1s).
    • Support scroll incident: Not much to say, described above.
    • Unprefixed Page Visibility AP: I don't understand what this is (who knows how to guide)
    • Removed fromwindow.doNotTrack
    • Supportwindow.currentScript

September 18 Update:

Developers have found that the event delay on IPhone 5 click 300ms has been canceled (just Safari), but on other devices, Safari and Webviews are still on, with the latency still on iPod touch, iPads and iphone 5s.

Bugs and existing issues

Said IOS8 and iphone updates, and then said the current found bugs.

    • file upload is not supported !!! All the file upload is invalid, you can choose or take a picture, but JS can not get any data. HTMLor XMLHttpRequest The POST request is not. But this problem is not happening with desktop launcher apps.

    • Wkwebkit: The new engine can't read local files is a big problem, so for the hybrid app, you have to use the old UIWebView .

    • window.promptMay cause Safari to crash
    • Accessories : Voice on input and labels input, no matter what. (label is no longer pronounced when typing)
    • In the desktop app iframes , touch events are not monitored.
    • When the phone sleeps, the and callback in the desktop app Timers requestAnimationFrame is not executed.

This article was originally "IOS 8 and IPhone 6 for Web developers and Designers:next evolution for Safari and native WebApps"

Translator @ Luo Roller, reprint please specify.

Translator's statement

The changes that iOS 8 brings to the Web front end are still exciting, with more powerful performance, more powerful browsers and kernels, and more open interfaces that can be expected to have a bigger niche in web apps for iOS.

The article is very long, a lot of technical vocabulary, translated for half a day, if the translation is wrong or inappropriate, welcome to correct and provide advice.

Go Web developers and designers have to know about the 80 changes in IOS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.