Introduction to mobile web
The page accessed by mobile browser is called mobile terminal page
Reasons for developing mobile pages
(1) Because mobile phones are becoming more and more popular
(2) Responsive development cannot support highly functional pages
(3) Most of the early pages were on the pc side, and there was no special mobile side
Two results of early mobile phone accessing pc page
1. zoom the page to the mobile phone screen area. The font image will become small and inconvenient
2. The page on the PC side is not zoomed, and the mobile phone generates a scroll bar to scroll through the content. The disadvantage is that it is inconvenient to scroll through the content
The difference between mobile web and traditional web pages
1. the terminal screen sizes are different. The mobile web is mainly for the mobile terminal and the pc terminal. The web is mainly for the pc terminal
2. the page layout is different. The mobile web mainly uses the rem layout to cover the entire screen. The pc side is mostly fixed in width and height
Difference between mobile web and mobile app
Definition:
Mobile web is a page opened by mobile browser. Generally, it uses html+css+js to write pages
The mobile app needs to download and install the application (an application written in the native Android ios language)
H5app (H5 mixed native APP) is a page written using html5+css+js and wrapped with a native app shell
Development efficiency: Mobile Web > hybrid app > native app
Development cost: native app > hybrid app > Mobile web
Mobile browser
The mobile terminal has only four independent browser cores Trident WebKit gecko Presto
UC browser Android built-in browser QQ browser are all based on webkit
Layout of mobile terminal
1. percentage layout
2. flexible layout flex layout (both PC and mobile terminals can be used, but more mobile terminals are used)
3. responsive layout (applicable to pages on pc and mobile terminals)
4.rem layout (the element unit of the page dedicated to the mobile terminal is based on the font size of the root element)
Concept of pixels
Device pixels: physical resolution pixels 1920*1080
Device independent pixel: real pixel this is a logical pixel independent of physical resolution, which can be controlled by program
css pixels: pixels suitable for web development
Because the viewport width is stuck, that is, the viewport width is the same as the device width, so the real pixels =css pixels
Device independent pixel this is the logical pixel of the device, which is set by the manufacturer when the mobile phone leaves the factory
Most mobile phones now have a resolution twice that of real pixels (2x image). Physical pixels 2px= real pixels 1px = css pixels 1px
On the pc side, the resolution is the same as the real pixel. Physical pixel 1px = real pixel 1px
Viewport
A viewport is used to constrain the top-level block element <html> in a web site, that is, it determines <html>
Size of
The size of a viewport on a PC device depends on the size of the browser window, measured in CSS pixels.
viewport is a solution proposed by apple to solve the problem of rendering pages by mobile device browsers. It was later adopted by other mobile device manufacturers. Its use parameters are as follows:
By setting the attribute content= "", the middle is separated by commas
For example, <meta name= "viewport'content=" width=device width ">
Width sets the width of the layout viewport, which can be a numeric value or device width.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0">
Viewport related units
VW viewport width 1vw is 1% viewport width iPhone 5 1vw=3.2px 100vw is 100% viewport width
VH viewport height 1vh is 1% viewport height 100vh is 100% viewport height
vmin is the percentage of the smallest edge in the viewport. If the width is smaller, use width: vmin
Vmax is the percentage of the largest edge in the viewport height:vmax
span{
display: block;
width: 100vmin;
height: 100vmax;
background-color: #cccccc;
}
em and rem
If the text size of the current element referenced by em is not written, the default font size of the browser is 16px
If em is used for screen adaptation, the font size of each box must be modified
.one{
/* 1em=20px */
font-size: 20px;
width: 10em;
height: 10em;
background-color: pink;
}
.two{
/* 1em=30px */
font-size: 40px;
width: 5em;
height: 5em;
background-color: greenyellow;
}
rem refers to the font size of the root element. When doing screen adaptation, you can control all size units by modifying the font size of the root element
The reference point is the same when setting the size of all elements, so if you need to change the size, you only need to change the font size of the root element
As long as rem is used, the zoom in and out are proportional. The default minimum font size of the browser is 12px. Therefore, when the font size of the root element is less than 12px, it is fixed to 12px
html{
font-size: 20px;
}
.oneRem{
font-size: 1rem;
width: 10rem;
height: 10rem;
background-color: #ccc;
}
.twoRem{
font-size: 1.5rem;
width: 20rem;
height: 20rem;
background-color: red;
}
Double graph
principle
Generally, the resolution will be larger than the mobile phone screen, so the page will be put into the resolution before display, which means that all the contents will be distorted after being enlarged, and it is still unclear to zoom out after distortion
When we set the css, we directly reduce the image by two times. When it reaches the resolution, we need to enlarge it by two times to return to the original size of the image, so there will be no distortion. When it is compressed to the screen, there will be no distortion
Touch event of mobile terminal
4 touch events of the mobile terminal (Note: the events held by the mobile terminal must be triggered in the environment of the mobile terminal)
touchstart touch start event
touchmove touch move event
touchend touch end event
touchcancel touch cancel event (rarely used)
// It will be triggered at the beginning of touch, and one trigger event will only be triggered once
child.addEventListener("touchstart",function(){
console.log("Touch start");
})
// Touch move event will be triggered as long as it is moving
child.addEventListener("touchmove",function(){
console.log("Touch move");
})
// The touch end event is triggered only once when the hand releases the screen
child.addEventListener("touchend",function(){
console.log("Touch end");
})
// Touch cancel event: an unexpected event occurs during the touch process, such as a phone call or a pop-up window, which will cause the current touch event to terminate
child.addEventListener("touchcancel",function(){
console.log("Touch cancel")
alert("Touch terminate")
})
Touch event simulation click event
If the mobile terminal does not add a viewport, the click event will be triggered 300ms later than the touch event
Reason: because if the mobile terminal does not add a viewport, the page will be enlarged by double clicking. If the user is allowed to zoom, it needs to be judged. Clicking twice within 300ms means double clicking to enlarge the page. Clicking only once means clicking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
document.querySelector("div").addEventListener("click",function(){
console.log("Click event");
})
var isMove=false;
document.querySelector("div").addEventListener("touchmove",function(){
console.log("touch move event");
isMove=true;
})
document.querySelector("div").addEventListener("touchend",function(){
console.log("Touch end");
if(!isMove){
console.log("hold touchend As click event");
}
})
</script>
</html>
Using touch event to simulate click event to solve the problem of click delay
Click event delay
Since the double-click zoom function is not added to the viewport, there is no problem of scaling and delay if the viewport is added
The reason for using the touch event to simulate a click event is that in the touch event, the touchstart and touchend events are combined to create a click event
If the touchmove event is not triggered and the touchend event is triggered, it is equivalent to a click operation
If the touchmove event is triggered and the touchend event is triggered, then the sliding event is not the click event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.querySelector("div");
// Parameter 1 is the dom element that needs to trigger the click event
// Parameter 2 is the logic we need for the callback function to process
function tap(dom, callback) {
var isMove = false;
dom.addEventListener("touchmove", function () {
isMove = true;
})
dom.addEventListener("touchend", function () {
if(!isMove){
callback();
}
isMove=false; //Prevent sliding and continue. Click to initialize isMove
});
}
tap(div,function(){
console.log("I am a simulated click event")
})
</script>
</html>
Simulated rolling + ceiling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 200px;
height: 300px;
border: 5px solid black;
overflow: hidden;
}
.child {
height: 1000px;
width: 180px;
border: 2px solid red;
}
ul>li {
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid greenyellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<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>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
</ul>
</div>
</div>
</body>
<script>
var child = document.querySelector(".child");
var parent = document.querySelector(".parent");
// 1. starting position of sliding
var startY = 0;
// 2. position of sliding movement
var moveY = 0;
// 3. record the moving distance saved
var distanceY = 0;
// 4. distance moved before this time
var currentY = 0;
// It will be triggered at the beginning of touch, and one trigger event will only be triggered once
child.addEventListener("touchstart", function (e) {
/*
e.touches[0].clientX Is the distance to the upper left corner of the visible area
e.touches[0].pageX Is the distance from the upper left corner of the page
e.touches[0].screenX Is the distance to the upper left corner of the screen
*/
// Get the coordinates of the event trigger point when the sliding start event occurs
console.log(e.touches[0].clientY);
startY = e.touches[0].clientY;
})
// Touch move event will be triggered as long as it is moving
child.addEventListener("touchmove", function (e) {
console.log(e.touches[0].clientY);
moveY = e.touches[0].clientY;
// Calculate distance moved
distanceY = moveY - startY;
// Assign the moving distance to the vertical moving distance of child
// child.style.transform = "translate3d(0px," + (currentY + distanceY) + "px,0px)"
// child.style.transform="translateY("+(currentY+distanceY)+"px)"
if ((currentY + distanceY) < -700) {
child.style.transform = "translateY(" + -700 + "px)"
} else {
child.style.transform = "translate3d(0px," + (currentY + distanceY) + "px,0px)"
}
child.style.transition = "none";
})
// The touch end event is triggered only once when the hand releases the screen
child.addEventListener("touchend", function () {
currentY += distanceY;
})
/*
1.Add a click event to each li element
2.Set a certain upward or downward displacement of the moved child element according to the index * the height of each li element
3.Set an index for each li element (custom attribute)
4.Get the current index in each click event to calculate the displacement height
5.Set the displacement to the corresponding li element
*/
// 1. get all li elements
var lis = document.querySelectorAll("li");
// 2. traverse to add click events to each li element
for (var i = 0; i < lis.length; i++) {
// 3. add an index to each li element
// lis[i].setAttribute("index",i);
// You can also use h5 as a new attribute, and use data to indicate that it is a custom attribute
lis[i].dataset["index"] = i;
// 4. registration click event
lis[i].addEventListener("click", function () {
// 5. use dataset to obtain the current index
var index = this.dataset["index"];
// 6. calculate the displacement distance of sub elements
var translateY = -index * this.offsetHeight;
console.log(translateY);
// Maximum distance moved = height of child element - height of parent element. Once this distance is reached, the distance will be fixed
// Negative value due to upward movement - (child element - parent element height) = = = = = > parent element height - child element height
var minTranslateY = parent.offsetHeight - child.offsetHeight;
console.log(minTranslateY);
if (translateY < minTranslateY) {
translateY = minTranslateY
}
// 7. assign the calculated displacement to the child element
child.style.transform = "translateY(" + translateY + "px)";
child.style.transition = "all 0.5s"
// 8. take the current displacement as the starting point of the next movement
currentY = translateY;
})
}
</script>
</html>
Wiper plug-in
Swiper is commonly used for content touch sliding of mobile websites
Swiper is a sliding special effect plug-in made of pure javascript, which is oriented to mobile terminals such as mobile phones and tablet computers.
Swiper can achieve common effects such as touch screen focus map, touch screen Tab switching, touch screen multi map switching, etc.
Swiper is open source, free, stable, easy to use and powerful. It is an important choice for building mobile terminal websites!
https://www.swiper.com.cn/demo/index.html