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

How to develop HTML5 mobile phone website, I believe that many inexperienced people do not know what to do. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Recently, I have been studying the development of mobile websites and found that making mobile websites is not as difficult as I thought. Why would you say that? Let's think about this: we can even do the traditional PC website, can't we even handle a small mobile website? In fact, the mobile website is just a miniature version of PC! As for why it is difficult and powerless to start.

I think there are the following points:

First, there is no complete train of thought and process

Just like the process of making a website, if you can know its process, I believe it will not be difficult to make a mobile website! What's really hard is that you don't have a train of thought.

Second, make the technology of html5 unfathomable.

It seems that learning to use html5+css3 to do mobile websites is tantamount to learning the best martial arts. Actually, you're wrong! Don't think too deeply about html5. In fact, to be a mobile website, you really don't need the powerful functions of html5. (maybe for some rookies who don't know anything about technology: your mobile website is made of HTML5+CSS3, it's amazing! Can use the latest and most cutting-edge technology on the Internet. In fact, people with discerning eyes will know what technology is used to do it. As the saying goes: "the layman watches the fun, the expert watches the way")

All right, after all this talk, let's talk about how to develop mobile phone websites.

Basically, the development of mobile websites can be roughly divided into two categories. One is to use the framework to develop mobile websites. One is their own handwritten mobile phone websites.

First, framework development of mobile websites

The commonly used development frameworks are: the most popular Web front-end framework (BootStrap) and Jquery mobile.. Of course, there may be some frameworks developed on the mobile side, which I haven't studied specifically.

Why is BootStrap the hottest front-end development framework at present?

Because bootstrap has its own responsive layout (grid system) and can achieve the principle of giving priority to mobile devices.

What are the benefits of using bootstrap to develop websites?

1. You can make a website even if you don't know how to design.

Even if you don't know how to design, your web page can be super good-looking with the help of Bootstrap. Its powerful built-in style library makes your work a beauty.

Mainly reflected in: font files and bootstrap built-in UI style. (it provides good news for programmers who don't know how to design UI.)

two。 Get started quickly.

You can concentrate on solving the problem and leave the complicated details to Bootstrap to worry about. Can do a development, can adapt to all the terminals, and can quickly get started and build a website prototype. Also provides a lot of rich plug-ins, even if you do not know JS, basically can understand the common API, the effect on the website, basically can solve.

Disadvantages:

1. Do not follow best practices

One of the biggest problems we encounter when using Bootstrap is that your DOM element will be crowded with a large number of classes. This breaks one of the basic rules of good web design: HTML no longer has semantics, and content and presentation are no longer separated. Front-end purists will find this quite annoying, thinking that it poses greater challenges to scalability, reusability, and maintainability.

2. Bootstrap is too heavy

To put it bluntly: CSS and JS are a little big. 115k after CSS compression, 35k after JS compression

If you want to use all the features of Bootstrap, you should consider the loading time of resources. Of course, this may not be a problem in some places, but in New Zealand the Internet has to cross the Pacific Ocean, and it will be slow for the data to get there. So consider your target market.

I believe that any framework has its advantages and disadvantages. No product is perfect, so choose according to your own actual situation. As for some other frameworks do not explain too much for the time being, I believe that as long as you are willing to Baidu, you can find the answer you want.

Mobile phone end development process

II. Handwritten mobile websites

Generally speaking, if we develop mobile websites manually, we can basically be divided into two categories to do so. One is achieved by adding meta tags to the header of the page (the page refers to the html5 format to be developed). The other is realized through CSS3's Media tag (media query).

Here we explain in detail, using to add meta tags to do mobile websites.

Basically in the head of the page, we only need to add four meta tags to achieve the framework of a mobile website. Let me see which meta tags are.

1. Add viewport tags

Detailed attributes:

Width-the width of the viewport (width=device-width means: width is equal to the width of the device)

Height of height-viewport (height=device-height means: height equals device width)

Initial-scale-initial scale

Minimum-scale-the minimum scale to which users are allowed to zoom

Maximum-scale-the maximum scale to which users are allowed to zoom

User-scalable-whether the user can zoom manually

About the detailed principles and knowledge of viewport, you can do it on Baidu! I won't explain it in detail here.

2. It is forbidden to change digits into telephone numbers.

In general, IOS and Android systems will default to a certain length of digits as phone numbers, and even if they do not add them, they will be displayed as phones by default. So, it is necessary to cancel this!

3. Safari private meta tags in iphone devices

It says: allow full-screen browsing and hide the browser navigation bar

4. Private tags of iphone

It specifies the style of the status bar at the top of the safari in the iphone

The default value is default (white), which can be set to black (black) and black-translucent (gray translucent)

There is also a personalized link tag that allows users to change their icons to our own defined icons when they create shortcuts to the desktop. For example, mobile phone Tencent online tags:

However, Tencent does not standardize the naming of this png icon. Normally, we require that the file name should be apple-touch-icon.png or apple-touch-icon-precomposed.png. The named iOS of the former will automatically add fillets, shadows and highlights to the icon, while the latter will not add these effects.

Basic frame code of mobile website:

XML/HTML Code copies content to the clipboard

Mobile website body {font-size:62.5%;font-family: "Microsoft YaHei", Arial; overflow-x:hidden; overflow-y:auto;} .Hello {max-width:640px; min-width:300px; margin:0 auto;}! I am Duan Liang, this is my first mobile web page!

The following is a case study of a mobile page based on the secondary development of Wechat:

In fact, what bothers me about the development on the mobile side is the choice of font units.

With the rise of CSS3, a kind of unit called rem gradually appears in our field of vision. It is a relative unit that can be responsive. It sets the current text size, or width and height, relative to the html root element. Because it is a non-fixed value, unlike PX. I heard that in PX, the resolution of PC is different from that of Mobile, so it uses rem. I am not very clear about this. I also asked some experts who do mobile websites and learned some information.

It turns out that most people still use PX for layout, and rem is used less. At present, the home page of Taobao on the mobile side is laid out by rem as a unit. On the question of using rem units and its benefits: you still need a big god to answer this question, after all, I am only new to it.

On the debugging of Mobile website

In general, we use: debugging in the browser + real machine testing, because the browser is only a simulation tool, after all, if we actually develop, we have to use the real machine to test.

For example: (Android phones, iPhone5, 5s, 6, 6 Plus.)

And test on the browser, you can chrome (Google browser) F12 debugging tool: there is a small phone-like icon, click to simulate the phone test.

As shown below:

Mobile phone test effect picture

Or use Firefox's testing tool: press shift+ctrl+M to view.

After reading the above, have you mastered the method of how to develop HTML5 mobile phone website? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.