Mobile development foundation
Basic knowledge points
Browser status
-
Common browsers on PC
360, Google, Firefox, QQ, Baidu, Sogou
-
Common browsers on mobile
UC, Baidu mobile browser, 360 secure browser
-
Compatible with mainstream mobile browsers and webkit kernel browsers
Current status of mobile phone screens
- Very large size, serious fragmentation
- Automatic resolution recognition
- Debugging method: simulating mobile phone debugging of Google Chrome
Viewport
The area of the screen where the browser displays the content of the page
Layout viewport
Compress the PC size page and display it in the mobile window
Visual viewport
The area of the website that the user is seeing, the visual viewport can be manipulated by zooming, but it will not affect the layout viewport and still maintain the original width
Ideal viewport
The most ideal browsing and reading width depends on the viewport tag manually to notify the browser to operate. How wide the device is, how wide our layout viewport is
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
Double graph
Physical pixel
The smallest particles displayed on the screen are physically real and have been set by the manufacturer before leaving the factory
- On the PC page, 1 Px is equal to one physical pixel, but the mobile terminal is not
Physical pixel ratio
The number of physical pixels that a PX can display, also known as the screen pixel ratio
Multiple graph
- Open in the mobile phone Retina screen, in the standard viewport settings, use the double image to improve the quality of the picture and solve the blur problem in high-definition devices
- Use a large multiple of the picture to set the width and height of the img and compress it to make it high-definition
- Perform the effect under the background image, and change the size of the background photo through background-size
Mobile development options
Make a separate mobile page (mainstream)
- Generally speaking, shopping platforms mostly use separate mobile pages to write
- +m before the URL domain name can open the mobile terminal, and jump to the mobile terminal page by judging the device
Responsive pages are compatible with mobile terminals (second)
- Generally written separately on the mobile end of the official website page
- Change the style by judging the screen width to adapt to different terminals
- Trouble in production, needs to be adjusted and compatible
Mobile FAQ
-
Browser
- Basic webkit core is the main, only need to consider webkit compatibility issues
- The private prefix of the browser only needs to consider -webkit-
-
Initialization of CSS normalize.css
- Customizable css file, different browsers are more unified in rendering form
- Is modular, improving ease of use
- Fix the bug, solve the inconsistent default style of the browser
-
CSS3 box model box-sizing: border-box
- The width of the traditional box model=width+border+padding
- The width of the box in CSS3. The content in width already contains border and padding, which will not enlarge the box.
- You can use CSS3 purely without considering compatibility issues
Mobile technology selection
alone
- Flow layout (percentage layout)
- flex flexible layout
- less+rem+media query layout
- Mixed layout
Responsive
- Media inquiries
)]
Mobile technology selection
alone
- Flow layout (percentage layout)
- flex flexible layout
- less+rem+media query layout
- Mixed layout
Responsive
- Media query
- bootstrap