In this paper, the introduction

At present, the mainstream apps in the market are divided into three types: Native APP, Web APP and Hybrid APP.

  • Native App has the most complete Native functions and the best performance, but the development cycle is long and the cost is high. IOS and Android codes need to be set separately.
  • Web APP is the most convenient implementation of H5 development, but it cannot call hardware and offline storage, resulting in poor experience and performance.
  • Hybrid APP development, make a set of IOS and Android shell, cover the INTERFACE of H5, and can quickly develop public interface and call the bottom layer, complete work.

WebView

Hybrid development is based on WebView mode development, built in a high-performance browser.

  • Android 4.4.w before WebKit
  • Android 4.4.w start android built-in WebKit to Chromium WebKit
  • Safari, the built-in browser for IOS, is also Chromium WebKit

Compatibility notes

  1. iframe

The iframe element creates an inline frame that contains another document, allowing access to links outside the project. The iframe tag in Safari acts as a new, separate page in ios. When a new link is loaded in the app, ios automatically opens Safari to load a new page (out of the app). To prevent browser default events, use window.location.href = SRC to prevent Safari from popping up

2. Position: fixed property

Fixed property has some compatibility problems, it is normal in Android and PC but has a little pit in IOS, for example, IOS5 is only supported above, even if it is supported, positioning may fail, there may be bugs, such as the original IOS sliding event, sliding inertia rebound, However, in combination with the fixed attribute in the second article, the whole element that was originally fixed may be forced to slide, so replace fixed with absolute as much as possible

  1. The page cannot refresh when backward

Both window.history.back() and window.history.go(-1) retreat to read the cache directly from the browser, rather than reloading the page and its events. To retrieve the previous page, you can either reload the page using window.location.reload(), or you can specify a URL to jump to by specifying location.href = url