Your location:Tech News>Tips>Desgin tool>WEB engineers and designers will learn the 10 IOS 8 fresh change tutorial

Latest News

WEB engineers and designers will learn the 10 IOS 8 fresh change tutorial



  WEB工程师和设计师必学的10个IOS 8新鲜改变 29教程网

  @ Luo Luo Leilei: Hi Ben Big Dipper, and cried, as listed iPhone 6 and the iPhone 6 plus, ios 8 last week finally push updated.New equipment, new resolution.Next iOS 8 What change was introduced to this article, all tailored for engineers and designers to write Yo.

  Overview Introduction iOS 8 Safari update on iPhone 6 and iPhone 6 Plus New Api support new features and support for Safari iOS 8 native optimize new designs video plug-in enhancements JS Bug Safari and problems on iOS 8

  Apple officials have become accustomed to high cold, this time, Apple still has not been updated with any iOS Safari or related documents, so the following all data and information are based on information published on my own testing and WWDC.

  iOS Safari supports the new HTML5 APIs on 8: WebGL (3D canvas), IndexedDB, Navigation Timing API, Crypto API hybrid applications: faster, optimized WebView support scrolling Scroll event: finally support! Video playback: full-screen API, Metadata API HTML template elements Safari plug-ins: Native App can be read on the page DOM pictures in the form of plug-ins: support Image Source Sets and dynamic PNGAPNG CSS: Support Shapes, support fractional units browsers automatically fill out forms (support credit card call camera to scan) web and local applications to interact: Log data sharing EcmaScript 6: Partial support SPDY: support Google home of the new network protocol file upload fails (this is the Bug) removed remotely on a minimal-ui property supports Yosemite debugging

  Compared to other browser on the mobile terminal, iOS 8 does not support some features:

  Media queries getUserMedia dp units: access to local hardware devices, capture audio and video Api WebRTC: IM @viewport page statement Datalist WebP images iPhone 6 and iPhone6 Plus

  iPhone6 Plus iPhone 6 and Apple following the iPhone 5 has a resolution of different sizes and different equipment.6 is a parameter iPhone 4.7-inch size and physical 750 × 1334 resolution screen (dpi iphone 5s same value), iPhone 6 Plus 5 is.5 inch and 1080 × 1920<分辨率(401 dpi)的屏幕.不走寻常路的苹果给这两分辨率取名叫Retina HD屏,嗯哼,比Retina多了一个HD.

  For Web developers, the size of the difference is not just ruler.Also includes default viewport (related to width = device-width setting), the pixel ratio (relating to the application of high-resolution images), icon size and icon login page image size.

  Viewport size

  Are reading this article, you should already know, until last week, is the screen width 320px all iPhone and iPod use.iPhone 6 Plus and more wide compared to the previous generation, brought us more space, Apple has finally decided to widen the width of the browser.But Apple is a wonderful use of a special set of screen pixel values.Most 4.viewport width of 5 ~ 7 inch Andrews apparatus set 360px, iPhone is 375px, the most 5 6.5-inch Android machine (for example, the Samsung Note) of the viewport width of 400, the iPhone 6 plus is very strange 414px (╮ (╯_╰) ╭ Apple is so frustrating trouble Which will lead you ah).This means that compared to the same size machine Android, iPhone 6 users probably see less content of 4%.Maybe it''s not a big problem, but the next you may still have to check whether your site adaptation.


  Adapting new iPhone, you can use the following two paragraphs


  Device pixel ratio

  iPhone 6 and iphone 5 as the pixel ratio is 2, but on the other hand iPhone real pixels of 6401 dpi ratio should be about 2.60.To solve this problem, Apple has a whole new concept Rendered pixels rendered pixel, if the pixel ratio is 3x, then theoretically a css set to 414px wide screen pixel should have a physical (reality is 1242px 1080px, less 13% ).

  So, if you use a map to a 3x HD Android devices, this map will fit the same iPhone 6 Plus iPhone''s browser, but in rendering first will resize the image before the screen.

  Icon Size

  iOS specific icon size, on the iPhone 6 plus is 180 × 180, iPhone or the six old 120 × 120.

  Adapter iPhone 6 plus, you need toIn this notation


  Start Figure

  If you have a webapp start drawing, and then you have to add two lines of code adapted to the new iPhone.

  iPhone 6 corresponding to the image size is 750 × 1294, iPhone 6 Plus corresponds to 1242 × 2148 .


  UA probe

  At present location, upgrade to iPhone iOS 8 all are using the same UserAgent, so we had no way to judge this is in the service end what equipment, of course, by JS Media Queries and we can be judged by the skill.

  The new API

  The two most important Api support finally logged in iOS, respectively, WebGL and IndexedDB, at the same time, Safari also began to support Web Cryptography and Navigation Timing.

  WebGL support for 3D modeling, and is enabled by default browser.For game developers, this is a good news, and more rich interactive form will appear on the page.

  You can perform 3D rendering effect on iOS 8 Safarai in Microsoft''s test FishGl.


  IndexdDB is following the new W3C standard WebSQL hired after launch, along with iOS support IndexedDB, we can use the same set of database API on different mobile browsers.

  Navigation Timing API for web performance optimization is good news.Through this API we can spend more accurate measurement of load time rendering, optimized web user experience.

  New features Safari


  When iPhone is horizontal screen, iPad (available anyway), if you put your finger pinching the screen (for example, you want to zoom in on the page), you will enter a label preview mode, with up it very terms, but may be with you gesturechange events use on web pages conflict, if you want to use a custom scale events, first of all you have to love your event.preventDefault () to prevent the browser''s default event.



  Form autofill and credit card scanning capabilities

  Safari now supports auto-complete forms, and Safari detects when you have to fill out a credit card when he will turn the camera allows you to scan directly to physical credit cards.


  Meanwhile, Safari also supports autocomplete attribute, reference latest spec.This means that if you are in a login page, Safari can be called Keychain data automatically fill in user account name and password.Luis Abreu wrote about iOS 8 security and privacy-related articles, recommendations can look at: https: //


  If your site offers RSS feeds, iOS 8 users can directly in the browser when you open the pages of his bookmarks bar.@ Icon is that there are subscribers of a button, although a little low-key, but whatever the outcome, there is still incorrect ?( ''▽ `)?.



  Now the address bar and toolbar becomes a translucent.IOS 7 only on the address bar is translucent.This means that when the page first loads of the viewable area becomes larger (includes tool bar at the bottom).


  Update on the iPad

  iOS 7 or later, browse the web using Safari on iPhone, scrolling will be automatically hide the toolbar (ipad not), iOS 8 ipad has also been changed (if they had had) on the details.The difference is that when the landscape mode, iPad above, there is a small strip, iPhone is a full-screen.


  In addition, Safari will open the sidebar to maintain the original viewport size in landscape mode, it will only change the aspect-ratio


  Bookmark icon and popular sites

  Safari has finally support the favorites and bookmarks in web site comes icon icon.When you search for a keyword in the address bar, it will also show icon website (ipad I just tested without).


  Cross-platform switch

  If you use both Mac and iPhone, when you browse a Web page on the iPhone, you can (Yosemite needed) Continue reading on your Mac (WWDC this year on a special demonstration of this feature, had to wait until the official update of Yosemite).

  More like a native of webapp

  If you want the user on a Web page, without once established, it jumps directly to the Apple Store to download your application, it is not possible.We want to have interaction between the page and should be local, iOS 8 bring more convenience.

  Safari plug-in shared (between web and native applications can be shared security credentials, no longer need to log in again) Certification.

  The new webview

  The iOS 8 update, the most exciting news is on mixed Mac application with a common set of API, meaning the iOS can also have more features, interactive communications Mac and iOS, as well as:

  PostMessage supported by interactive New classes configure the Web View similar to the power we have on Android''s Web View between JavaScript and native applications.(Who translated this case) Nitro engine more powerful than the previous generation js execution speed 4x speed.

  The new webview (WKWebkit) is a new framework (WebKit.Part of the framework) are not fully compatible with the old UIWebView.But the old webviwe still retained, so the old webapp will still use the old webview.

  The current GM version (the public version is the same) still exist local files can not be uploaded bug, for some hybrid applications (such as Cordova PhoneGap), this (and more webviwe) be regarded as good news.

  This means that the current iOS 8, has four web engines, of course, also means that the bug and compatibility are all different.

  Safari (using a full-screen desktop applications) UIWebView (old) WKWebView (new)

  You can HTML5Test.Your webapp performance test here under com.


  For the kind of cladding applications and webviewe applications, this change is very important.For example, Chrome web applications and native applications on Facebook in iOS (we cheetah Battery Doctor, also a large number of mobile phone cheetah application webview).According to one report, 11.5% of the traffic is coming from iOS webview-based applications.

  Safari plug-ins

  iOS Safar on 8 is the first plug-in support and expand the system pre-installed browser (Firefox OS and perhaps it would be a).IOS 8 from the beginning, local application can be extended to interact with Safari, mainly through two ways: Share (Share extension) and action (Actions).Action can interact with the DOM, means that local application can directly modify the DOM element.

  All plug-ins require the user to actively choose to trigger (need to click on the different buttons to trigger share), yet not automatically run plug-ins.

  Older Safari share the same menu is replaced by a JavaScript-based plug-ins.For example, to add to the desktop js code is now in a period of Safari.

  In addition to Apple at WWDC presentation function, Safari browsing this improvement means that there will be a great experience to improve.Login account password For example, you can directly call or LastPassword stored in 1Password Safari, if you have the iPhone Touch ID fingerprint recognition, you can even fingerprint authentication login. has stated that the upcoming plug-in for iOS 8.


  Front-end designers and well-being

  The safari 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 Animated PNG supported APNG format images Parallax effects and Pull-to-refresh supported (associated with the Scroll event) SVG Fragments Identifiers (for SVG Sprites) Image Source Set support HTML Template support

  Animated PNG

  APNG format is PNG bitmap animation development, but did not get official recognition PNG organization, and GIF somewhat similar (but GIF is based on the JPG), which means we can produce dynamic 32-bit full color translucent.

  Scroll time difference and the pull-down refresh

  If you did move the end of the project, you must know and do not support iOS7 before scrooll event, iOS 8 finally support scrolling event, which everyone can finally use visual roll moment correlation of js and css in the iOS, but does not guarantee fully fit.

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

  Decimal unit

  Safari CSS unit is now turned into a float from integer.This means that the CSS object model such as offsetTop and ClientWidth may get little value, before the old iOS will return an integer value.

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

  div {border-width: 0.5px;}

  CSS synthesis and deformation

  Use mix-blend-mode support for this new property we have different elements of different shapes to synthesize a picture, which is a feature in Adobe HTML5 aspect of the new.On their website (http: // adobe.github.You can see the demonstration of DEMO and documents on io).


  From the example demonstrates Adobe''s official website, it seems that the deformation is in force, synthesized and not entered into force (my Mac Chrome did not take effect).

  CSS shape

  CSS shapes are also a feature of the new Adobe.For this feature, it is recommended under the "CSS Shapes 101" on W3Cplus.Individual still very optimistic about the promotion and application of this feature, give us the possibility to bring more web design.


  Image Source Set

  There are responsive to know the developer of this picture should not be unfamiliar with the popularity of high-definition screen, do adaptation for different resolution is a need to pay attention to the problem, Apple iOS 8 support Image Source Set Spec, means you canTags use the new property.


  In the above code example, the pixel bit iPhone 6 Plus is 3x, it loads superhires.png this picture, while iPhone 5s, iPhone 6 will load the hires.png this FIG., the rest is loaded lores.png.But unfortunately, iOS is not supported yetelement.

  HTML template