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 8Image Source Sets and dynamic PNGAPNGShapes , fractional units supportedminimal-ui properties fromYosemiteRemote debugging on supportIOS 8 does not support some features compared to other browsers on the mobile side:
Media queriesiphone 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 SIZEAre 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>
Device pixel ratio<meta name="viewport" content="width=375"><meta name="viewport" content="width=414">
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.
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
Start diagram<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
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.
UA Detection<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)">
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.
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 zoomWhen 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.
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 functionSafari 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
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? (´▽ ')?
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 ipadAfter 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
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 switchingIf 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.
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:
postMessage on-premises appsNitro 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.
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 benefitsThis time Safari has added a lot of HTML5,CSS3 support
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 refreshIf 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 UnitSafari 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.
SVG Fragment Identificationdiv { border-width: 0.5px;}
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 morphingUsing 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 shapesCSS 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 SetThe 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> .
<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 .
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?). )
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 .
Video Metadata API<input type="button" value="Go Full screen" onclick=‘document.querySelector("video").webkitEnterFullScreen()‘>
Safari starts with <video> support preload="metadata" that allows the browser to trigger events for loadedmetadata Easy developer control.
I can control other elements by CSS before putting them in <video> .
ECMAScript 6 Promises , and Iterators Maps For-of Weak Maps so on.scroll incident: Not much to say, described above.window.doNotTrackwindow.currentScriptSeptember 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.
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 crashinput and labels input, no matter what. (label is no longer pronounced when typing)iframes , touch events are not monitored.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 statementThe 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
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
