b/s architecture:
b:browser browser s:server server
PC-side website: foreground and background management system
mobile-side website: webapp
is essentially a website, this website runs on the mobile phone browser
C/s architecture:
c:client client, s:server server
Some software:
PC software, mobile phone software: app application
software on android mobile phone software on
ios mobile phone
App classification:
webapp: the website that runs on the mobile phone is based on the BS architecture . Webapp
can be developed using html+css+js.
Advantages:
low development cost, no installation required, easy to upgrade, and can run on andorid and ios.
Disadvantages: The experience is not good, and the native interface cannot be called.
nativeapp: native app, to put it bluntly, it is andorid and ios.
The native app runs directly on the operating system (android or ios), can call the native interface, and the experience is also very good.
Advantages: The experience is very good, the speed is also very fast, access to local resources, and the animation effect is relatively good.
Disadvantages: The development cost is higher, the update is slow, and it is inconvenient to go online. Users also need to download and install.
hybridapp: Hybrid app, nesting h5 pages in native app
is to combine the advantages and disadvantages of webapp and nativeapp to make hybrdapp. RN.
Viewport:
<meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1">
If you put a PC-side website on the mobile terminal, the whole will be reduced. Analyze the reasons:
Put the PC-side website on the mobile terminal in two steps:
1) Put the PC-side website in a virtual container. The width of this virtual container is 980. This 980 is artificially stipulated, and the mobile phone is set at the factory.
If the overall width of the webpage is 980px, it means that the webpage is just placed in this virtual container.
If the overall width of the web page is less than 980px, this virtual container can also be put down.
If the overall width of the web page is greater than 980px, then a horizontal scroll bar will be generated.
2) It will stuff the virtual container into the phone.
If the width of the mobile phone is also 980, this virtual container is just packed into it.
Unfortunately, the width of the phone is fixed when it leaves the factory. For example, the width of iphone6/7/8 is 375. The width of iphone5 is 320. The width of iphone6/7/8plus is 414.
That is to say, I put a 980 virtual container in a 375 or 320 or 414 mobile phone. At this time, the virtual container will be compressed, and it will be compressed when
you put it in the mobile phone. , The box on the page becomes smaller.
This virtual container is called the viewport.
Does the display size of the same box on different phones depend on the resolution?
Answer: It does not depend on another pixel, which is called device independent pixel.
The independent pixel of iphone6/7/8 device is 375, usually we just say that the width of iphone6/7/8 is 375.
Set the width of the virtual container (viewport)
artificially : Why do you want to set it artificially? Answer: In order to prevent the box from compressing.
Take iphone6 as an example, if the viewport is also set to 375, the box will not be compressed.
<meta name="viewport" content="width=device-width">
Conclusion: As long as we write webapp, we must reset the viewport.
Viewport attributes:
width Set the width of the viewport. Usually its value is device-width
initial-scale. Set the initial zoom value of the page. The
minimum-scale minimum means the minimum value. The minimum zoom value allowed by the user is a number, which can be a decimal. Normally, 1
maximum-scale maximum is the maximum value, which means that the maximum zoom value allowed by the user is a number, which can be a decimal. Normally, it is 1
user-scalable. Whether the user is allowed to zoom with two fingers. No 0 means that yes is not allowed. Allowing
height to set the height of the viewport is useless
You can only set the initial-scale, width=device-width is equivalent to initial-scale=1.0.
Answer: Viewport = set independent pixels (375) / initial-scal
There are two ways to set the viewport:
width
initial-scale
If both of these methods are set, the one with the larger viewport will be the final one.
User scaling is not allowed, and there are two ways:
1) user-scalable=no
2) minimum-scale=1, maximum-scale=1