Introduction to mobile web development-browser and web development Browser

Introduction to mobile web development-browser and web development Browser

Some time ago, I learned about the mobile Web manual and thought that this kind of book is really needed. It is just a simple explanation of the most basic knowledge about mobile Web. Just today, we will sort out some of the content we have learned before, record and share it with you, and make it easy to read and understand later.

We often deal with browsers when developing mobile web. Do you know there are several types of mobile browsers? What about browsers that we cannot ignore when testing mobile web pages?

Before starting, let's take a look at mobile Web

I. What is mobile Web?

1. There is no essential difference between mobile web and desktop web, especially consideringResponsive DesignWe use the same set of CSS on large computer monitors and small mobile phone screens, we can understand it as "a website that supports small touch screens running on more browsers than you have heard"

2. However, mobile web development is slightly different from desktop development, for example

• How to Adapt to screens of different sizes
• Compatibility with many Android versions
• Why does some css attributes not take effect on mobile phones?
• There is a delay in the click event on the mobile phone

The above issues are the main topics of interest in mobile development. These topics are divided into three categories:

• Browser
• View
• Event

Do not try to understand and solve the above problems in one breath (in fact, the problem of mobile web development may be unpredictable. For browsers, different vendors and different brands of mobile phones, different operating systems, different built-in browsers, and even different versions of the same browser may have different support for certain styles or events on the Mobile End .) This article does not introduce technologies, but focuses on the environmental factors that affect mobile web development. First, let's take a look at the mobile world, which may be helpful for web development.

2. Mobile Browser

 Browser type

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

The following describes different types of browsers.

1. built-in browser

Each mobile phone has a built-in browser. That is to say, this browser is a firmware developed by the operating system vendor and is generally upgraded with the system upgrade. The following table lists the built-in browsers for mobile phones on different platforms:

Most built-in browsers are tightly integrated into the underlying operating system. That is to say, the browser cannot be upgraded separately.

2. Downloadable browsers

Many browsers can be downloaded and installed by users. Opera, Firefox, Chrome, and UC are several important browsers.

In practice, only android can have a downloadable browser, because other rendering engines cannot be installed on iOS.

The downloadable browser has an advantage over the built-in browser, that is, it can be updated with a new version.

3. WebView

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

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

4. Proxy Browser

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

The proxy browser corresponds to a complete browser. When a user requests a page, the browser captures HTML, CSS, JavaScript, and other resources through http requests. Once everything is ready, the page will be rendered and displayed. These steps are performed on the client, occupying the memory, processor time, and battery life.

Steps for rendering pages in the proxy Browser:

(1). When a user requests a page, a special request is sent to a special proxy server instead of an ordinary http request.

(2) the proxy server will send a normal http request to the web server that the user wants to access. It will request HTML and other resources.

(3) the proxy server contains a rendering engine that can render pages normally.

(4). the proxy server compresses and renders the page to become an image of the website (as a pdf or image ing)

(5) the proxy server sends the file to the client through encrypted connections.

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

Proxy browser advantages and disadvantages:

Advantage: It is dedicated to saving money for users. Because the proxy browser only needs to display static files and allows you to click or touch a link to generate a simple UI, It is lightweight and can even run on a low-specification mobile phone, users can access webpages without buying expensive smart phones.

Disadvantage: no client interaction. When a browser encounters any dynamic event at any time, it must request the server to give new instructions. Therefore, there is often a lag of one second or longer between the trigger and execution. Most events cannot be performed, such as onscroll, resize, and mouseout.

3. browsers on the Android platform

First, we will not introduce the browsers in iOS, because the browsers in iOS are not chaotic with those in Android. As mentioned earlier, Apple does not allow installation of other rendering engines. However, based on the characteristics of proxy browsers, proxy browsers can be installed on Apple (but not all proxy browsers ). Therefore, when testing web pages on an Apple mobile phone, we generally test the Safari browser. If necessary, we can test the proxy browser.

Next let's talk about Android

The problem that Web developers encounter when facing Android is that, unlike other platforms, the built-in browsers of Android are complicated and affected by many factors. As mentioned above, for browsers, different manufacturers, different brands of mobile phones, different operating systems, and different built-in browsers, even different versions of the same browser may have different support for certain styles or events on the Mobile End. The openness of the Android platform allows more mobile phone manufacturers and browser vendors to develop their own browsers to increase the value of devices or operating platforms. This makes the complexity and differentiation of browsers in the Android Market. (For example, the built-in browsers of two different mobile phone manufacturers have different optimizations for the same web style)

Android Browser

1. Android Webkit

A smartphone operating system requires a browser. Therefore, the original Android provides its own Webkit-based browser, which has no name. We call it "android WebKit" (built-in browser ).

2. Chrome

Google wants to use chrome to replace WebKit in webkit-based browsers. This helps Google collect user data and provide more powerful advertisements. However, device manufacturers prefer to be able to  on their own and make their devices stand out from each other.

3. Samsung Chrome and other browsers

It is different from Google Chrome. (Differences between versions and style Support)

Three browsers that must be tested

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

(2). GoogleChrome

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

Note: Check whether the user agent string (navigator. userAgent) contains the word chrome. If any, Chrome (not necessarily GoogleChrome). If not, Android WebKit is used.

 

I have made a previous PPT to share my knowledge, and now I have reorganized it to record and review it. It is not very detailed, I still hope to help the children's shoes I'm interested in have some knowledge about mobile terminals.

Thank you for reading.