HTML5 mobile website development process_html5 tutorial skills-H5 Tutorial-php.cn

I have been studying the development of mobile websites recently and found that making mobile websites is not as difficult as imagined. Why do you say that? Let’s think about it: We can even make a traditional PC website, but can’t we even make a small mobile website? In fact, a mobile website is just a miniature version of a PC website! As for why it is difficult and I feel like I don’t know where to start.

I think there are the following points:

1. There is no complete idea and process

Just like the process of making a website, if you can know With its process, I believe you won’t find it difficult to build a mobile website! What’s really difficult is that you have no idea.

2. Think of the technology of html5 as inscrutable

It seems that learning to use html5 css3 to build a mobile website is equivalent to learning the top peerless martial arts. Actually you are wrong! Don’t think too profoundly about HTML5. In fact, when building a mobile website, you really don’t need much of the powerful features of HTML5. (Perhaps for some newbies who don’t know much about technology: Your mobile website is made with HTML5 CSS3, which is awesome! It can use the latest and most cutting-edge technology on the Internet. In fact, anyone with a discerning eye will know it at a glance. What technology is used? As the saying goes: "A layman can see the excitement, but an expert can tell the truth")

Okay, now that I have talked a lot, let’s talk about how to develop a mobile website!

Basically developing mobile websites can be roughly divided into two categories. One is to use frameworks to develop mobile websites. One type is handwritten mobile website.

1. Framework development for mobile websites

Generally used development frameworks are: currently the most popular framework for the Web front-end (BootStrap), Jquery mobile... Of course it is possible There are also some mobile development frameworks, which I have not studied in detail.

Why is BootStrap the most popular front-end development framework currently?

Because bootstrap comes with a responsive layout (grid system) and can implement the mobile device first principle.

What are the benefits of using bootstrap to develop a website?

1. You can make a website even if you don’t understand design

Even if you don’t understand design, your webpage can still have a great appearance with the help of Bootstrap. Its powerful built-in style library makes your work look stunning.

Mainly reflected in: font files and bootstrap’s own UI style. (Providing good news for programmers who don’t know how to design UI)

2. Get started quickly

You can concentrate on solving the problem, and leave the tedious details to Bootstrap to worry about. It can be developed once and adapted to all terminals, and you can quickly get started and build a website prototype. It also provides a lot of rich plug-ins. Even if you don’t know JS, you can basically understand common APIs and solve the effects on the website.

Disadvantages:

1. Not following best practices

One of the biggest problems we encountered when using Bootstrap is that your DOM elements 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 rather annoying, arguing that it makes scalability, reusability, and maintenance more of a challenge.

2. Bootstrap is too heavy

To put it directly: CSS and JS are a bit heavy. CSS is 115k after compression, JS is 35k after compression

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

I believe that any framework has its advantages and disadvantages. No product is perfect, so choose based on your actual situation. As for some other frameworks, I won’t 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 development process

2. Handwritten mobile website

Generally, if we develop the mobile website manually by ourselves, we can basically divide it into two categories. arrive. One type is achieved by adding meta tags to the header of the web page (the web page is developed in HTML5 format). The other type is implemented through the Media tag (media query) of CSS3. Friends who don’t know about media queries can read this article: Responsive Layout.

Here we will explain in detail how to use meta tags to build a mobile website.

Basically, we only need to add four meta tags to the head of the web page to implement the framework of a mobile website. Let me take a look at the meta tags.

1. Add the viewport tag

Detailed attributes:

width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------  viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

Copy after login

For the detailed principles and knowledge points of viewport, please go to Baidu! I won't explain it in detail here.

2. It is forbidden to change numbers into phone numbers

Under normal circumstances, IOS and Android systems will default to numbers within a certain length as phone numbers, even if they are not added. It will be displayed as a phone number by default, so it is necessary to cancel this!

3. The safari private meta tag in iphone devices

It means: allow full-screen mode browsing, hide the browser navigation bar

4. iphone The private tag

specifies the style of the status bar at the top of Safari in iPhone

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

手机网站基本框架代码：

<!doctype html>  
  
<html>  
  
<head>  
  
<meta charset="utf-8">  
  
<title>手机网站</title>  
  
<meta name="keywords" content="" />  
  
<meta name="description" content="" />  
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  
<meta name="format-detection" content="telephone=no" />  
  
<meta name="apple-mobile-web-app-capable" content="yes" />  
  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
<meta name="author" content="duanliang, duanliang920.com" />  
  
<style>  
  
    body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}   
  
    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}   
  
</style>  
  
 </head>  
  
    
  
<body>  
  
    <div>  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    </div>  
  
</body>  
  
</html>

Copy after login

下面是我做的基于微信二次开发的手机页面案例：

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。

原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。

关于手机网站的调试问题

一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。

比如：（Android类手机，iPhone5、5s、6、6Plus...）

而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。

如下图：