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
The above issues are the main topics of interest in mobile development. These topics are divided into three categories:
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
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.
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
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)
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 ).
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 obtain data 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)
(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.