Introduction to mobile Web development--browser

Some time ago to learn about the Mobile Web Handbook, I really need this is not biased technology, framework or tools of the book, but simply to explain some of the basic knowledge of mobile web. Just finishing a part of the previous study of the content, recording and sharing, but also convenient for later access to understanding.

When we develop the mobile web, we often deal with browsers, do you know how many types of browsers are available on the mobile side? What are the browsers we can't ignore when testing a mobile Web page?

Before we get started, let's take a quick look at the mobile web

First, mobile web is what

1. There is no essential difference between mobile Web and desktop Web, especially given the technical operation of responsive design We use the same set of CSS on a large computer monitor and a small mobile phone screen, and we can interpret it as " Run on a Web site that supports small touch screens on more browsers than you've ever heard of. "

2. But there are some small differences between mobile web development and desktop development, such as

• How to fit a screen of different sizes
• How to compatible with many versions of Android
• Why some CSS properties do not take effect on the phone
• There is a delay in the Click event on the phone

The above questions are the main topics we focus on in mobile development, which are divided into three main categories:

• Browser
• Visual port
• Event

Do not rush to understand and solve the above problem (in fact, mobile web development problems may be unpredictable, in terms of browsers, different vendors, different brands of mobile phones, different operating systems, different built-in browser, Even different versions of the same browser may have different support for some styles or events on the mobile side. This article does not introduce technology, but focuses on the environmental factors that affect mobile web development. Look at the Mobile world first, which may help you with web development.

Second, mobile browser

Browser Type

There are 4 types of browsers on your phone: built-in browsers, downloadable browsers, proxy browsers, and WebView. These browsers overlap in some places: a browser does not have to belong to a type. For example, the agent browser opera Mini is downloaded by many users, but it is a built-in browser on some feature phones.

Let's talk about different types of browsers, respectively.

1. Built-in browser

Each phone has a built-in browser, that is, this browser belongs to the firmware, usually developed by the operating system vendors, generally with the upgrade of the system. The following table lists the built-in browsers for different platform phones:

Most built-in browsers are tightly packed into the underlying operating system, which means that browsers cannot be upgraded individually.

2. Downloadable browser

Many browsers are available to users to download and install on their own. Opera, Firefox, Chrome and UC are some of the most important browsers.

In practice, only Android may have a downloadable browser, because other rendering engines are not allowed on iOS.

The downloadable browser has an advantage over the built-in browser, which can be updated as soon as a new version is available.

3. WebView

WebView is an operating system browsing interface for native applications. For example, a game's help page may be a Web page, and the game app will use the platform's webview to show the page.

Apple does not allow other rendering engines to be installed on iOS devices. Therefore, other browsers that want to install on iOS must use Apple's WebView.

4. Proxy browser

The rendering engine of the proxy browser can parse and execute HTML, CSS, and JavaScript, but not on the device, but on the remote server.

Corresponding to the proxy browser is a complete browser. When a user requests a page, the browser crawls HTML, CSS, JavaScript, and other resources through HTTP requests, and once everything is ready, it renders and displays the page. These steps are performed on the client, which consumes memory, processor time, and battery life.

Proxy Browser Rendering page steps:

(1). The user requests a page that does not send a normal HTTP request, but instead sends a special request to a special proxy server through an encrypted connection.

(2). The proxy server sends a normal HTTP request to the Web server that the user wants to access, and it requests HTML and other resources.

(3). The proxy server contains a rendering engine that renders the page normally

(4). The proxy server compresses the rendered page and becomes some kind of picture of the site (imagine a PDF or an image map)

(5). The proxy server sends this file to the client via an encrypted connection

(6). The client presents the file to the user

Agent Browser pros and Cons:

Pros: Committed to saving money for users. Because the agent browser has to do is to display a static file, allowing to tap or tap the link to generate a simple UI, so it is lightweight, even can run on a low-spec phone, users do not need to buy a very expensive smart machine to access the Web page.

Disadvantage: No client interaction. Whenever a proxy browser encounters any dynamic event, it must go to the requesting server to give a new indication. As a result, there is often a second or longer lag between triggering and executing events that most do not allow for certain events, onscroll, resize, mouseout, etc.

Third, the browser under the Android platform

First of all, there is no introduction to the browser under iOS because the browser under iOS is not confusing to Android. As mentioned before, Apple does not allow the installation of other rendering engines. However, based on the features of the agent browser, Apple can install the proxy browser (but not all proxy browsers can). So when testing a Web page on an Apple phone, we typically test the Safari browser and, if necessary, test the proxy browser.

Here's a look at Android.

The problem that Web developers face with Android is that, unlike other platforms, Android's built-in browser is complicated and affected by many factors, as mentioned earlier, in terms of browsers, different vendors, different brands of phones, different operating systems, different built-in browsers, Even different versions of the same browser may have different support for some styles or events on the mobile side. And the open Android platform, so that more mobile phone manufacturers, browser manufacturers can develop their own a browser to increase the value of equipment or operating platform. This also makes the Android Market under the complexity of the browser and differentiation. (for example, the built-in browsers for two different handset vendors have different optimizations for the same web style)

Android Browser

1. Android WebKit

A smartphone operating system requires a browser, so the original Android provides his own WebKit-based browser, which has no name and we call it "Android WebKit" (built-in browser).

2. Chrome

Based on WebKit's browser, Google wants to use chrome instead of WebKit. Helps Google collect user data and provide more powerful advertising. But device manufacturers prefer to get their own data, and their devices are different.

3. Samsung Chrome and other browsers

It's not the same as Google Chrome. (Differences in version and some styles support)

Three browsers that must be tested

(1). Android WebKit4 (rich in different devices and different versions of the Android system)

(2). Googlechrome

(3). Samsung Chrome (Samsung high-end mobile)

Note: Check the user agent string (navigator.useragent) to see if it contains the word chrome, if it is chrome (not necessarily googlechrome), and if not, it's Android WebKit.

Before doing the PPT of a knowledge sharing, and now re-organized a bit, mainly for the record and revisit, not very detailed, or hope to help interested children's shoes on the mobile side of some knowledge to understand.

Thanks for reading.

Introduction to mobile Web development--browser