Web developers and designers must know ten iOS 8 changes.
Source: mobilexweb Source: Luo lei (@ Luo luolei) Welcome to share the original article with bole headlines
XI dapupben, weeping,XI dang DadWith the release of iPhone 6 and iPhone 6 plus, ios 8 finally pushed updates last week. New Device, new resolution. Next, this article will introduce the changes in iOS 8.
OverviewI am used to Apple's official cool. This time, Apple still hasn't updated any documents related to Safari or iOS, so all the data and materials below are based on my own tests and the information published on WWDC.
Safari on iOS 8Image Source SetsAnd dynamic PNGAPNGShapes, Supporting decimal unitsminimal-uiAttributeYosemiteRemote debugging onCompared with browsers on other mobile terminals, iOS 8 does not support some features:
Media queriesIPhone 6 and iPhone 6 Plus are another device of different sizes and resolutions after iPhone 5. The iPhone 6 parameter is4.7 inchSize and750×1334Physical resolution screen (dpi value is the same as iphone 5S), iPhone 6 Plus is5.5 inchAnd1080×1920Resolution (401 dpi) of the screen. An unusual Apple named the two resolutionsRetina HD screenWell, betterRetinaOne moreHD.
For web developers, the difference is not only the size of the ruler. It also includes the defaultviewport(Aboutwidth=device-width), Pixel ratio (for applications with high-definition images), icon size, and login page image size.
| IPhone 6 | IPhone 6 Plus | |
|---|---|---|
| Dimensions | 4.7" | 5.5" |
| Viewport's device-width (in CSS pixels) | 375 | 414 |
| Viewport's device-width (same resolution for Android devices) | 360 | 400 |
| Device Pixel Ratio | 2 | 3 (approximate) |
| Rendered Pixels rendering pixel (default viewport size * dpr) | 750 × 1334 | 1242 × 2208 |
| Physical pixels | 750 × 1334 | 1080 × 1920 |
For the screen size of the new iPhone, we recommend an article "iPhone 6 Screens Demystified ".
VIEWPORT SIZEYou should know that you are reading this article.
Until last week, all iPhone and iPod were using320pxThe screen width. IPhone 6 and Plus are wider than the previous generation, which gives us more space. Apple finally decided to widen the browser width. However, Apple uses a set of special screen pixel values. Majority4.7 ~ 5 inchFor Android devicesviewportSet width360pxOn the iPhone 6, however375px, Most5.5 inchAndroid machine (such as Samsung Note)viewportWidth is400The iPhone 6 plus is very weird.414px(Baidu _ Baidu) Why are you doing so ). This means that iPhone 6 users are less likely to watch than Android machines of the same size.4%. Maybe this is not a big problem, but you may have to check whether your website is applicable.
Adapt to the new iPhone, you can use the following two sections<meta>
| 12 | <meta name="viewport" content="width=375"><meta name="viewport" content="width=414"> |
The pixel ratio of iPhone 6 is the same as that of iphone 5.2But on the other hand, the iPhone 6401OfdpiThe actual pixel ratio should be approximately2.60. To solve this problem, Apple has made a new concept.Rendered pixels rendering pixelsIf the pixel ratio is3xIn theory, a css width is set414pxThe screen should have1242px(In reality, it is 1080px, Which is 13% smaller ).
Therefore, if you use3xThe image is also applicable to the iPhone 6 Plus, but the iPhone browser first adjusts the image size before rendering the screen.
IOS-specific Icon size, which is180×180The iPhone 6 is still old.120×120.
To adapt to the iPhone 6 plus, you need to add this section in
| 1 | <link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"> |
If your webapp has a launch chart, you need to add two lines of code to adapt to the new iPhone.
The image size corresponding to iPhone 6 is750×1294The iPhone 6 Plus corresponds1242×2148.
| 12 | <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)"> |
Currently, all iPhones upgraded to iOS 8 use the sameUserAgentSo we have no way to determine the device on the server.Media QueriesWe can still judge through skills.
The two most important Api support have finally logged on to iOS, respectivelyWebGLAndIndexedDBAt the same time, Safari began to support Web Cryptography and Navigation Timing.
WebGLSupports 3D simulation and is enabled by the browser by default. This is good news for game developers. More interactions and forms will appear on the web page.
You can perform 3D rendering on iOS 8 artificial ai under the FishGl test of Microsoft.
IndexdDBIt is a step-by-step application of W3C.WebSQLNew standards introduced later, with iOS supportIndexedDBWe can use the same database API on different mobile browsers.
Navigation Timing APIGood news for web performance optimization. Through this API, we can measure the rendering time more accurately and optimize the user experience of webpages.
Scaling of Safari New FeaturesWhen the iPhone is in the horizontal screen, iPad (both horizontal and vertical), if you use your fingers to pinch the screen (for example, you want to enlarge the page), you will enterLabel Preview modeIt is quite helpful to use it, but it may be used with you on the web page.gesturechangeEvents conflict. If you want to use a custom scaling event, first you needevent.preventDefault()To prevent browser default events.
Six months ago, Apple launched the Minimal UI mode. Safari in iOS 7.1 added the minimal-ui attribute to the meta tag and hidden the address bar and navigation bar when loading the webpage. after iOS 8 is updated, this is canceled again, and fan, the cool goddess, did not say why.
Automatic Form filling and credit card ScanningSafari now supports Automatic completion of the form, and when Safari detects that you want to fill in a credit card, it will allow you to enable the camera to scan the real credit card directly.
Safari also supportsautocompleteAttribute, refer to latest spec. This means that if you are on a logon page, Safari can call the data in the Keychain to automatically enter the user name and password. Luis Abreu has written an article about iOS 8 security and privacy. We recommend you read this article.
If your website provides RSS subscriptions, iOS 8 users can open them in the Bookmarks Bar when Browsing Your webpage. That's@There isSubscriptionAlthough the button is a little low-key, there is still something else.
Now the address bar and toolbar become translucent. On iOS 7, only the address bar is translucent. This means that the visible area of the webpage becomes larger (including the toolbar at the bottom) during initial loading ).
Updates on iPadAfter iOS 7, you can use Safari on the iPhone to browse the webpage. The toolbar is automatically hidden during scrolling (not for ipad ), the iOS 8 ipad also has changes in this detail (both horizontal and vertical ). The difference is that there is a small entry on the iPad in horizontal mode, while the iPhone is full screen.
In addition, when you enable the sidebar of Safari in Landscape mode, the originalviewportSize, only changeaspect-ratio
Safari supports website icons attached to webpages in favorites and bookmarks. When you enter a keyword in the address bar for search, the icon of the website will also be displayed (I just tested the ipad ).
Cross-platform SwitchIf you use both Mac and iPhone, When you browse a web page on the iPhone, you can continue reading on your Mac (Yosemite is required) (this year's WWDC demonstrated this function, wait until the official update of Yosemite ).
More like native webappIf you want users to download your application from the Apple Store without being confirmed on the webpage, it is impossible. IOS 8 brings more convenience to the interaction between webpages and local hosts.
New webviewThe most exciting news of this iOS 8 update is that the hybrid application shares a set of APIs with the Mac, which means there are more functions on iOS, communication between Mac and iOS, and:
The new webview (WKWebkit) is part of the new framework (WebKit. framework ).UIWebViewNot fully compatible. However, the old webviwe is retained, so the old webview will still be used by the old webapp.
The current GM version (the same for the public version) still has the bug that local files cannot be uploaded. For some mixed applications (such as Cordova PhoneGap), this (Multi-webviwe) is good news.
This means that at present, iOS 8 has four web engines. Of course, it also means that compatibility and bugs are different. 1. Safari 2. Web. app (using the full-screen desktop application) 3. UIWebView (old) 4. WKWebView (new)
You can test the performance of your webapp in HTML5Test.com.
This change is very important for shell applications and webviewe applications. For example, Google Chrome on iOS and Web applications in Facebook's local applications (we use webview as our battery doctor and mobile phone cheetah ). According to a report,11.5%The iOS traffic is based onwebview.
Safar on iOS 8 is the first browser pre-installed to support plug-ins and expansion systems (Firefox OS may also be regarded as one ). Since iOS 8, local applications can be expanded to interact with Safari in two ways: Share extension and Actions ). Actions can interact with DOM, meaning that local applications can directly modify DOM elements.
All plug-ins need to be triggered by the user (you need to click different buttons in the sharing). Currently, no plug-ins can be automatically run.
The sharing menu of the old Safari version is also replaced by JavaScript-based plug-ins. For exampleAdd to desktopNow it is a piece of js Code in Safari.
In addition to the features demonstrated by Apple on WWDC, this improvement of Safari means that browsing the Web page will greatly improve the experience. For example, you can directly log on to Safari by calling the Account Password Saved By 1 password or LastPassword. If your iPhone has a Touch ID fingerprint recognition, you can even directly perform fingerprint verification.
Pocket.com has declared that the plug-in for iOS 8 will be available soon.
Benefits of front-end and designersMany html5 and css3 support has been added to safari this time.
The APNG format is an extension of the PNG bitmap animation, but it is not officially recognized by the PNG organization. It is a bit similar to GIF (only GIF is based on JPG ), this means that we can make a 32-bit full-color translucent dynamic graph.
Scroll time difference and pull-down refreshIf you have worked on a mobile project, you must know that iOS7 and previously do not supportscroollEvents: iOS 8 finally supports rolling events. Now you can use js and css related to visual rollbacks on iOS, but it is not guaranteed that they are fully compatible.
This support allows us to perform pull-down refresh and unlimited drop-down downloads.
Decimal point unitSafari now converts CSS units from Integers to floating-point numbers. This means that in the CSS object modeloffsetTopAndClientWidthA small value may be obtained, and the old iOS returns an integer.
At the same time, this means that you can use half a pixel unit.
| 123 | div { border-width: 0.5px;} |
SVG has never been used, and it does not understand this attribute. Let's take a look at the English language first.
Fragment identifiers from SVG is a method to link to one specific fragment or portion of an SVG instead of the root element. 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 synthesis and DeformationExploitationmix-blend-modeThis new attribute allows us to combine different elements of different shapes into an image. This is a new function of Adobe In HTML5. You can view the DEMO and documentation on their website.
From the demo on the Adobe official website, it seems that the deformation has taken effect, and the merging has not taken effect (neither does Mac Chrome ).
CSS shapeCSS shape is also a new feature of Adobe. For this feature, we recommend CSS Shapes 101 on W3Cplus. I am optimistic about the promotion and application of this feature, which can bring more possibilities to our webpage design.
Image Source SetDevelopers who know about responsive images should be familiar with this. With the popularization of HD screens, it is important to adapt to different resolutions. Apple iOS 8 supportsImage Source Set Spec, Which means thatLabel.
| 1 | |
In the above code example, the pixel ratio of iPhone 6 Plus is3x, It loadssuperhires.pngThis picture, while the iPhone 5S, iPhone 6 will loadhires.pngFor this type of graph, the rest will be loadedlores.png. But unfortunately, iOS does not yet support<picture>Element.
<template>It is very useful for webapps,<template>Can containcssOrjs(Will not be parsed by the browser), in actual application, we can use<template>Create a newnode.
This update improves video playback, and supports iOS8.Full Screen playback,Meta Data ApiAndCSS layering(Do you know that HTML5 Video elements can be controlled through CSS ?)
Safari does not support full-screen playback APIs, even iOS 8. However, you can solve this problem in a special way.<video>Add a segment to the elementjs.
| 1 | <input type="button" value="Go Full screen"onclick='document.querySelector("video").webkitEnterFullScreen()'> |
Safari started to support<video>Ofpreload="metadata"Allows the browser to triggerloadedmetadataEvents facilitate developer control.
I can use css to control the placement of other elements<video>Before.
ECMAScript 6, IncludingPromises,Iterators,Maps,For-of,Weak MapsAnd so on.scrollEvent: I will not talk about it much. I have discussed it above.window.doNotTrackwindow.currentScriptUpdated on April 9, September 18:
Some developers found thatclickEvent300msThe latency has been canceled (only Safari), but there are also Safari and WebViews on other devices. The latency is still on iPod touch, iPads, and iPhone 5s.
After talking about iOS 8 and iPhone updates, let's talk about the current bugs.
HTMLOrXMLHttpRequestOfPOSTNeither can the request. However, this problem does not occur for apps started on the desktop.UIWebView.window.promptMay cause Safari to crashinputAndlabelsThis parameter is not used when the input is complete. (When the label is input, it is no longer pronounced)iframesMedium,touchThe event was not detected.TimersAndrequestAnimationFrameThe callback is not executed.The changes that iOS 8 brings to the web Front-end are still very gratifying, with more powerful performance, more powerful browsers and kernels, and more open interfaces, it is foreseeable that web applications targeting iOS will be more useful.
The article is very long and contains a large number of technical words. If the translation is incorrect or inappropriate, you are welcome to correct and provide suggestions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
