Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5 to develop mobile web. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

First, the current situation of mobile web development:

At present, people use the most frequently used devices than mobile phones, and people's understanding of the website is becoming more and more clear. website construction has become an important way of enterprise publicity and marketing, and then mobile website construction has also become a trend.

Mobile web development refers to web development that needs to be adapted to mobile devices.

There is no essential difference between mobile web development and PC-side web development, and HTML/CSS/JavaScript technology is still used.

II. The difference of web development between mobile and PC

1. Different browsers

The browser on the mobile is different from that on the pc.

Google browser Apple browser, UC browser QQ Browser Baidu Mobile browser 360Security browser Sogou browser Cheetah browser, etc.

Domestic mobile browsers are modified according to the webkit kernel, there is no independently developed kernel, and the domestic operating system is also modified based on the Android system. Therefore, on the mobile side, the css3 attribute only needs to be prefixed with webkit.

2. Screen size

Mobile devices are of different sizes (very large and severely fragmented)

Android: 3200480480854009607201280108019202k 4k screen

Iphpne: 640 '960 640' 1136 750 '1334 1242' 2208

Let the page be adapted in different mobile phone screens, the width is adaptive, and the layout is based on the full screen of the mobile phone.

When doing mobile development, you must understand viewports, that is, viewport.

PC: to fit all pc pages with the version center, pc is based on the version center for layout

3. Layout mode

Characteristics of the mobile terminal:

1. The compatibility problem on the mobile side is much smaller than that on the PC side, because the browser version on the mobile side is relatively new (H5 support is better).

two。 The screen on the mobile phone is relatively small, and there is less content that can be put.

So the question is: how to solve the problem of inconsistent screen size in layout?

PC end, fixed version center, so that all resolution of the computer version center is the same, such as Sina, NetEase and so on.

Mobile: the mobile cannot set the version center because the device screen itself is small and it is not appropriate to set the version center. Therefore, most of the mobile terminals will adopt streaming layout (percentage layout).

Streaming layout, also known as percentage layout, is one of the layout methods often used in mobile development.

Characteristics of streaming layout:

The width is adaptive, the height is fixed, and the design drawing is not 100% restored.

Streaming layout can not achieve all devices are very realistic to restore the design drawings, some devices display effect is not particularly good-looking. However, streaming layout is a very common layout on the mobile end, which is relatively simple.

For mobile development, it is best to understand responsive layout and flex layout. Flex layout is also the mainstream layout for mobile devices.

Debugging problems of three mobile terminals

There are a variety of mobile devices, and the screen sizes are very different, especially on the Android end, which brings some trouble to our page preview. In practice, as developers, there are not enough devices for us to test (except for the testing department), even if there is, the efficiency is very low, so developers generally simulate different devices through the mobile phone simulator of the browser.

The following takes chrome browser as an example to introduce the use of mobile phone simulator:

Step 1: open the browser, press F12, and click the second icon below:

Step 2: here is the interface of the mobile phone simulator:

In this interface, you can select a variety of mobile devices for debugging.

IV. The framework of mobile web development

There are many frameworks for mobile web development. Here are a few:

1. VUE

Vue (pronunciation / vju?/, is similar to view) is a progressive framework for building a user interface. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when used in conjunction with modern tool chains and various supporting class libraries, Vue is also fully capable of driving complex single-page applications. Vue.js is the most popular front-end framework in China.

2. Jquery mobile framework

JQuery Mobile is the version of jQuery on mobile devices. JQuery Mobile

The natural jQuery core library will give old programmers a good programming difficulty, and there is a complete and unified jQuery mobile UI framework.

3. Bootstrap framework

Bootstrap is based on html, css and javascript. It is concise, flexible and efficient, which makes Web development faster. It is a html and css framework launched by Twitter.

4. AngularJS

AngularJS is mainly used to build single-page Web applications. It makes it easier to build interactive modern Web applications by increasing the level of abstraction between developers and common Web application development tasks

5. MUI

The official high-performance front-end framework that comes closest to the native APP experience. Provides rich UI controls based on iOS 7, and complements some UI controls specific to the Android platform.

This is the end of the article on "how to develop Mobile web with HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.