HTML5: Getting started with mobile development

I. Introduction

Common mobile terminal development is divided into mobile website and responsive design.
Mobile development allows technicians to focus on the optimization of the mobile page without worrying about the compatibility of the desktop version, but once the content of the page is changed, the maintenance cost is doubled;
Responsive design allows developers to maintain only one project, saving development and maintenance costs, but the disadvantage is that they need to be compatible with the mobile terminal and the desktop, which also tests the page design.
The two development methods are strong and the weak is still inconclusive. This blog mainly discusses the mobile terminal development skills.

Two, mobile terminal development skills

1. Viewport settings

The display windows of traditional desktop websites are often developed at a resolution of 1024X768 or higher, which is much larger than the window size of the mobile terminal. In order to allow desktop web pages to be displayed normally on mobile devices, mobile browsers have introduced a virtual window called "viewport". The size of this window is different in different devices. (1024px for windows, 980px for ios)
In order to enable the mobile device to display the page completely, the viewport is often scaled by the browser to adapt its width, so that the 980px webpage can be displayed on the 320px mobile device. This is why some of our web pages look very small on mobile phones. (At this time, when using JavaScript to get the page width, it is still 980px)

In the mobile page, we can add meta tags to the tags to set the viewport.

<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>

The above code does two key things:
1. Set the width of the viewport to the width of the device;
2. Set scale=1.0, that is, the window is not scaled by default;
If you don't want users to zoom your page, you can do as follows:
```
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>
```
That is, the page zoom is locked to 1.0, and the user is organized to perform zooming behavior.

2. Percentage layout

The advantage of the percentage layout over the traditional pixel layout is that when the user zooms, the page layout will not be messed up by the width change.
When the user zooms too large, the picture or text part may be blocked. The following methods can be used to solve the problem:
1. For pictures, set padding for them;
2. For text, you can use vw to replace px. Vw represents the width of the text to the viewport, and vh represents the height. In the vw system, the width of the viewport is set to 100vw, and the relative text size is converted in turn.

3. Flexible layout: Flex

Traditional web pages are flooded with a lot of floats, which puts a lot of pressure on browser rendering performance. In this regard, there is a more flexible flexible box model-Flex layout.
Regarding the relevant knowledge of flexible layout, please jump to the MDN website to learn, and I will not repeat it here:

4. Media Query

The resolutions of the mobile terminal are varied, high-resolution pictures are under pressure to render on low-resolution phones, and low-resolution pictures are very blurry on high-resolution phones. Both situations are very bad.
In this regard, CSS3 provides a display rule called Media Query .
```
    <link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">
```
In the above code, the link tag is used to import the external css file and the media attribute is added at the same time. The content is explained below:
1. screen represents the type of media being the computer or mobile terminal display screen (available values: all, print, tv, etc.);
2. and represents the relationship of "and";
3. (max-width: 600px) indicates the characteristics of the media and needs to be placed in parentheses, which means that the maximum width of the media is 660px;
4. So the meaning of the entire media is: when the screen width is less than or equal to 600px, the css file is applicable.
Here is an example:
1. screen and (min-width: 400px): When the screen width is greater than or equal to 400px, apply the css file;
2. screen and (min-width: 400px) and (max-width: 600px): When the screen width is greater than 400px and less than 600px, apply the css file;
3. all and (max-device-width: 480px): When the device width is less than or equal to 480px, apply the css file;
4. all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait): When the width of all media devices is between 481px and 1024px, apply this css file. When it is portraitchanged landscape, it means the media that matches the horizontal screen.

With media query, we can create corresponding css files for devices with different screen resolutions:

    <!-- 针对所有设备的基础样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- <=480的手机可用 -->
    <link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)">
    <!-- 480<px<1024的手机可用 -->
    <link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)">
    <!-- >=1024的手机可用 -->
    <link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)">

Of course, we can also specify the corresponding restrictions in the css file:
```
@media all and (max-device-width: 480px){
      
      
    h1 {
      
      
        font-size : 24px;
    }
}
```
It should be noted that the css code corresponding to the rule must be placed in the brackets of media.

5. spite diagram

On the desktop side, the parallel download of files has long attracted attention, and it has attracted more attention on the mobile side. In mobile devices, the number of files downloaded in parallel is very limited, generally 4~5. Too many files will affect the loading speed of the page.
In order to solve the problem of downloading the number of pictures, Sprite is a good choice.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <style>
        *{
       
       
            padding: 0;
            margin: 0;
        }
        ul{
       
       
            list-style: none;
        }
        li{
       
       
            width: 250px;
            float: left;
            position: relative;
            font-size: 32px;
            color: #565656;
            border-bottom: 1px solid #ccc;
            line-height: 170px;
            text-indent: 180px;
        }
        li::before{
       
       
            content: "";
            width: 170px;
            height: 170px;
            background: url(./image/color.jpg) no-repeat;
            position: absolute;
            left: 10px;
        }
        li:nth-child(1)::before{
       
       
            background-position: 0 0px;
        }
        li:nth-child(2)::before{
       
       
            background-position: 0 -170px;
        }
        li:nth-child(3)::before{
       
       
            background-position: 0 -350px;
        }
        li:nth-child(4)::before{
       
       
            background-position: -170px 0px;
        }
        li:nth-child(5)::before{
       
       
            background-position: -170px -180px;
        }
        li:nth-child(6)::before{
       
       
            background-position: -170px -350px;
        }
        li:nth-child(7)::before{
       
       
            background-position: -340px 0;
        }
        li:nth-child(8)::before{
       
       
            background-position: -340px -190px;
        }
        li:nth-child(9)::before{
       
       
            background-position: -340px -340px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>    
</body>
</html>

Show results:

Insert picture description here

Using spite map, you can reduce the download of parallel images and speed up rendering.

6. Icon font

Icon fonts are an important means of replacing pictures to display special icons and special fonts. They are popularized very quickly. Some famous websites such as Alibaba Vector Icon Library, fontawesome, etc. have many exquisite icon fonts;

Below we use a set of icons to demonstrate the use of icon fonts:

Take FlatUI as an example, first download the relevant font file from the official website and import the page:

 @font-face{
        
        
     font-family: 'flat-ui-pro-icons-regular';
            /*三选一*/
     src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'),    /*常见的矢量字体封装格式*/
         url("./font/glyphicons/flat-ui-pro-icons-regular.eot"),     /*SFNT子集化后压缩*/
         url('./font/glyphicons/flat-ui-pro-icons-regular.woff');    /*SFNT压缩后的文件*/
}

Create a new h1 tag and introduce fonts in its before pseudo-class. Note: contentThe content is unicode encoding :

h1::before{
        
        
    font-family: 'flat-ui-pro-icons-regular';
    content: '\e608';
    margin-left: 20px;
}

The final rendering effect on the page:
It is worth mentioning that the color of the icon font can be changed with the color of the label; if you want to use a colored icon, the monochrome icon font cannot be achieved, you need to use svg or pictures to achieve.

7. Mobile interaction

On mobile devices, people’s interactions have changed from mouse and keyboard to touch. Therefore, the interaction events that are repeated need to be replaced with events suitable for mobile terminals;
The traditional click event will have a delay of about 1s on mobile devices, because the mobile browser needs to determine whether the user long presses or clicks;

To make the mobile experience smoother, you can change the click event to touch event:

let btn = document.getElementById('btn');
btn.addEventListener('touchstart',function(ev){
      
      
    console.log(ev.touches.length)
})
document.body.addEventListener('touchmove',function(ev){
      
      
    console.log(ev.target)
})

There are three events in touch: touchstart, touchmove and touchend ;

**touchstart: ** Triggered when the touch starts

**touchmove: ** Triggered when the finger slides on the screen

**touchend: ** Triggered when the touch ends
And each touch event includes three touch lists, and each list contains a series of corresponding touch points (used to implement multi-touch):

touches : a list of all fingers currently on the screen;

targetTouches : a list of fingers located on the current DOM element;

changedTouches : A list of fingers involved in the current event.
Each touch point contains the following touch information (commonly used):

dentifier : A numeric value that uniquely identifies the current finger in a touch session. Usually the serial number starting from 0 (android4.1, uc)

target : DOM element, which is the target of the action.

pageX/ pageY/ clientX/ clientY/screenX/screenY: A value, the position where the action occurs on the screen (page includes the scroll distance, client does not include the scroll distance, screen is based on the screen).

In addition to touch events, ios also provides gesture events, that is, multi-finger operations. When more than two fingers touch the screen, this event is triggered:

document.body.addEventListener('gesturechange',function(ev){
      
      
    console.log("手指旋转角度为：" + ev.rotation);
    console.log("手指旋缩放为：" + ev.scale);
})

The gesture event is as follows:

Gesturestart : Triggered when one finger has been pressed on the screen and another finger touches the screen. Similar to the function of
touchstart ; gesturechange : trigger when the position of any finger that touches the screen changes.

Gestureend : Triggered when any finger is removed from the screen.

8. Some small details

Get user client information:
```
console.log(navigator.userAgent);
```
After obtaining the client information, regular expressions can be used to make judgments and push CSS styles or page jumps with different rules. See this article for details:

Get the user's network environment:

console.log(navigator.connection.type);

Get the user's screen status:

console.log(window.orientation || screen.orientation);

Set to open the home page (IOS):

<link rel="apple-touch-startup-image" href="start.png">

Set up iTunes link:

<meta name="apple-itunes-app" content="app-id=123456">

Three, mobile terminal development framework

Zepto-jQuery for mobile. Zepto's usage is almost the same as jQuery, and it provides a lot of interfaces for mobile development.
BootStrap, Foundation, Semantic, Amaze-front-end development framework, provides a series of components and styles, which are convenient for developers to use;
Flat UI, BootMetro, Pure, Colors-design toolkit. Flat UI provides a series of basic elements of the page-icon fonts, vector graphics, etc., focusing on the aesthetics of design, which is very good for developers with insufficient design sense.
D3-Visualization tool. If you want to display a large number of charts and data on a web page, the visualization tool can complete all kinds of tall charts with simple codes.
Hammer-easily control touch gestures. Hammer.js provides tap, doubletap, pinch (two-finger swiping), rotation, swipe, pan (slow drag) and other gesture events that make complex gestures simple. All have good compatibility and can recognize most of the mobile devices on the market.