This paper sorted out the front-end development students in the development of mobile page encountered various problems, hoping to solve the problems encountered in the development of mobile front-end to provide help.

Introduction of Android WebView

WebView controls are provided in Android to display web content. Note for WebView: The main problem with Android WebView is that different Android versions of WebView use different browser kernels and browser versions, so Android version adaptation is required.

Below Android 4.4 (not including 4.4) system WebView underlying implementation is the use of WebKit(www.webkit.org/) kernel, In Android 4.4 and above, Google adopted Chromium (www.chromium.org/) as the underlying kernel support of WebView system.

Related articles:

  • Android WebView versions
  • Android: the most comprehensive Webview details
  • How to design an elegant and robust Android WebView? (on)
  • How to design an elegant and robust Android WebView? (below)

Introduction to UIWebView and WKWebView for IOS

Note that when using IOS WebView, there are two WebView environments: UIWebView and WKWebView. There are some differences:

UIWebView has been around since IOS2, WKWebView has been around since IOS8, and there’s no doubt that WKWebView will gradually replace the clunky UIWebView.

Related articles:

  • IOS UIWebView and WKWebView
  • IOS UIWebView and WKWebView, JavaScript and OC interaction, Cookie management
  • IOS UIWebView and WKWebView, JavaScript and OC interaction, Cookie management Look at me enough (middle)
  • IOS UIWebView and WKWebView, JavaScript and OC interaction, Cookie management
  • UIWebView and WKWebView

Quoting the performance differences between the two WebViews:

Compared with UIWebView, WKWebView has a great improvement on the whole, meeting the function of using the same set of controls on THE OS, while optimizing the whole memory overhead and the scrolling refresh rate and JS interaction. According to the principle of single responsibility, it is divided into three protocols to realize the response of WebView, which decouple the RESPONSE processing of JS interaction and loading progress. WKWebView does not cache processing, so the load performance of the web page need cache is not so high or can consider UIWebView.

Data compilation

Here are some articles about mobile front-end development on the web, sorted by category and dated (older articles may not be applicable). In order to better consult, locate and solve problems when encountering corresponding problems.

Use guide

  1. If you encounter problems with the mobile front end, find a list of articles by category to find a solution.
  2. If not, they are sortingSummary listA lot of small problems can be found in it
  3. If you still can’t solve the problem, please communicate with me through comments and work together to find a solution.

Third-party Interface

  • Mobile TERMINAL H5 Multi-platform Sharing Practice (2018.1)
  • Wechat customized Sharing links and texts (2018.9)
  • Mask code of wechat scanning prompt opened in browser (2017.8)
  • Built-in Web App Sharing API code of wechat, MOBILE QQ and Qzone (2017.5)
  • Wechat Open JS-SDK to help web development (2016.8)
  • How to set wechat to open APP download link in browser (2017.8)
  • Wechat open URL add open prompt mask in browser (Nov. 2016)

Screen adaptation

  • Screen adaptation

    • Design and Adaptation on Mobile (2018.6)
    • Adaptation of mobile terminal pages (2017.8)
    • Forced landscape display on Mobile Devices and Compatibility Issues (2017.12)
    • Mobile Front-end Adaptive Layout Solutions and Comparison (2017.12)
    • Some potholes and Solutions for mobile front end (Appearance) (2015.7)

  • Pixel unit

    • Using Windows Unit on mobile (2018.8)
    • 1px solution for Retina (July 2017)
    • 1px border on mobile terminal (2016.2)

  • Flexible & REM & MATA adaptation solution

    • Using Flexible to achieve terminal adaptation of H5 page of Mobile shopping (November 2015)
    • Summary of Mobile Front-end Adaptive Adaptation Methods (2018.9)
    • Meta added for Mobile Development (July 2017)
    • How does REM achieve adaptive layout? (2017.8)
    • Rem adaptive layout – Mobile adaptive Essential: flexibs.js (2018.9)
    • HTML Meta tag summary,HTML5 Head Meta attribute Summary (2017.7)

  • Vm & VH adaptation scheme

    • 【 essence 】 How to use VW in Vue project to achieve mobile end adaptation (2018.1)
    • Understanding the application of viewport units VM and VH in web page typesetting (2017.7)
    • True Fluid typography with VH and VW (July 2017)

  • iPhoneX

    • IPhone X Web Design (2017.9)
    • IPhone X Gaps and CSS (2017.9)

Cache & Storage

  • Introduction to Mobile Web Caching (2017.6)

Touch events

  • Mobile Terminal Touch Event Introduction (2017.1)

Flex layout

  • Detailed explanation of new and old hybrid writing method for Flex layout (compatible with wechat) (November 2015)
  • Flex compatibility in Android 4.3 (2016.8)
  • Mobile CSS Bisector Layout Extension (2017.5)

The position location

  • How much do you know about Position? (2013.10)
  • Fixed Layout Solution for Web Mobile Terminal (2015.4)

To optimize the speed

  • CSS3 Hardware Acceleration Skills (December 2015)
  • Mobile Web Site Performance Optimization: An Overview of Web Loading Technologies (2015.2)
  • Must see! Mobile Front-end Development Optimization Guide (2015.1)

Debug & Test

  • Mobile front-end Development and Debugging (January 2015)

Z – index layer

  • In-depth understanding of cascading context and cascading order in CSS (2016.1)

Animation & Style

  • Dragon Dance Opening animation combat (2016.1)
  • RequestAnimationFrame And Wireless Page Optimization (2017.12)
  • Mobile Front-end Page Making Skills not to be missed (2015.2)

summarize

  • 【 essence 】 Mobile terminal reconfiguration Combat Series 1 — Basic Knowledge (July, 2016)
  • [Essence] Summary and formatting of problems on Mars (June, 2016)
  • [Essence] Some problems encountered in the project and solutions (continuously updated) (2018.6)
  • 【 essence 】 Mobile Web resource collation (2015.3)
  • Share the front-end technology used in the Project of Hand Shopping New Year (2018.2)
  • Front-end Knowledge of Mobile Web Development (2015.5)
  • Summary of Mobile Front-end Knowledge (2016.3)
  • Pits encountered in mobile terminal production (December 2015)
  • Mobile Terminal Resource Collection (2014.7)

Related tool library project and usage

  • px2rem-loader — Github
  • iscroll — Github
  • How to use iscroll.js plug-in (2016.2)
  • Swipe — Github
  • Swipe- Touch sliding wheel play plugin Swipe. Js (2018.9)

Mobile front end series

  • Mars — Some mobile front-end issues sorted out by Tencent team
  • Mobile Web Development – someone put together a series of mobile front-end development knowledge, there is a lot of valuable content.
  • W3cplus-mobile – The quality of the content of the desert teacher is relatively high.
  • Front-end Development blog – Mobile Front-end Development – this is the best compilation of mobile front-end development I’ve found in two days.

Sorting result

I’ve copied and pasted so many articles to sort through the various issues of mobile front-end development.

  • Android is divided into webKit and Chrome eras.
  • IOS WebView has UIWebView and WKWebView.
  • In mobile development, we often encounter the situation of accessing wechat, Baidu and other third-party interfaces.
  • The screen size types on the mobile end are very complex and need to be optimized.
  • There are two main solutions for screen adaptation: Flexible flow and VM flow.
    • The Flexible flow uses REM and META to scale the size equally.
    • The VM stream uses vm and VH units to define element dimensions. For details, see vh and VW units. .
  • Pay special attention to the bangs of iPhoneX when adapting. There are solutions that can handle bangs specially.
  • After using screen adaptation, pay special attention to achieving a 1px display.
  • The Retina display can sometimes be blurry.
  • Touch events are unique to mobile terminals to handle touch behavior on the screen.
  • Flex layout has compatibility issues with Android 4.3 and previous models and needs to be compatible.
  • Used in IOSposition:fixedFixed elements will disappear when the soft keyboard is popped up. The offset problem is recommended to be changed to Absolute to achieve, and the disappearance problem is recommended to use the JS code to achieve the screen click after sliding to bring up the element display.
  • IOS WebView has a bottom elastic function. There are some strange problems with fixed and Absolute positioning. It is suggested to use touchMove event listener to intercept the elastic function.
  • Page slippage can be resolved by setTimeout(event, 0).
  • Mobile debugging is cumbersome, and the solution is to use the Charles proxy to view the log.
  • The mobile end needs the front end to achieve some animation activity page is best to use CSS animation to achieve better performance.
  • Please refer to other detailssummarizeThe first three articles.

The last

This article is dedicated to fast location and mobile front-end issues and will be updated.

If you have any questions or good information about mobile front-end development, please leave a comment in the comments section. Let’s work together to fill the pit in the moving front end.