(1) Domestic mobile browsers such as UC, QQ, and Baidu are all kernels modified based on Webkit, and there is no self-developed kernel in China. Compatible with mainstream mobile browsers, just handle the Webkit kernel browser.
(2) The viewport is the screen area where the browser displays the content of the page. Viewports can be divided into layout viewports, visual viewports and ideal viewports.
Layout viewport: Generally, the browsers of mobile devices have a layout viewport set by default to solve the problem of early PC page display on mobile phones. IOS and Android basically set the viewport resolution to 980px, so most of the web pages on the PC can be rendered on the mobile phone, but the elements look very small.
Visual viewport: It is the area of the website that the user is seeing.
Ideal viewport: It is set in order to make the website have the most ideal browsing and reading width on the mobile terminal. You need to manually fill in the meta viewport label to notify the browser to operate. The main purpose of the meta viewport label: the width of the layout viewport should be consistent with the ideal viewport width.
(3) Meta viewport label:
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
width: The width is the width of the viewport. You can set the device-width special value
user-scalable=no. The user is not allowed to zoom
initial-scale=1.0, the initial zoom ratio, the number greater than 0,
maximum-scale=1.0, the maximum zoom ratio, greater than The number of 0
initial-scale=1.0, the initial zoom ratio
Standard viewport settings: the viewport width and the device are the same, the viewport default zoom ratio 1.0, users are not allowed to zoom, the maximum allowable zoom ratio is 1.0, the minimum allowable zoom ratio is 1.0
(4) Double image:
physical pixels: (resolution) physical pixels refer to the smallest particles of the display screen, which are physically real. This is set by the manufacturer when it comes out. For example, Apple 6, 7, and 8 are 750*1334. During development, 1px is not necessarily equal to one physical pixel. 1px on the PC side is equal to 1 physical pixel, but the mobile terminal is not the same. .
Physical pixel ratio (screen pixel ratio): The number of physical pixels that can be displayed by 1px.
If you need a 50*50 pixel picture, put it directly into iphone8, it will enlarge twice, 100*100 will be blurred, if you take a 100*100 picture, then manually reduce the picture to 50*50, the prepared picture 2 times larger than the actual size, this way is 2 times the picture.
(5) Background zoom:
background-size: 500px 200px; If you only write one parameter, it must be zoomed in proportion to width and height. You can also write the percentage
background-size: cover; cover must completely cover the div box, and there may be some background images displayed Incomplete.
background-size:contain; The width and height are stretched proportionally. When the width or height is full, the div box will no longer be stretched. There may be some blank areas
(6) Mobile terminal development options: Make a
separate mobile terminal page (mainstream): Usually, the mobile terminal can be opened by adding m (mobile) in front of the URL domain name. By judging the device, if it is a mobile device, then jump to the mobile page.
Responsive pages are compatible with mobile terminals (Secondly): For example, Samsung can change the style by judging the screen width to adapt to different terminals. Disadvantages: production is troublesome and it takes a lot Make great efforts to adjust compatibility issues
Mobile technical solutions:
1. The mobile browser is basically based on the webkit core, so you can use H5 and CSS3 styles with confidence.
2. CSS initialize normalize.css
3. CSS3 box model box-sizing
traditional mode width calculation: box width = width + border + padding set in CSS
CSS3 box model: box width = width set in CSS width contains border and Padding, which means that the box model in CSS3, padding and border will not make the box big
box-sizing: border-box; With this sentence, the box becomes a CSS3 box model, and the mobile terminal can all use the CSS3 box model
4 , Special style
Click to highlight we need to clear, set to transparent to complete transparency-webkit-tap-highlight-color: transparent;
add this attribute to the default appearance of the mobile browser to customize the buttons and input boxes Style: -webkit-apperance:none;
Disable the pop-up menu when long pressing the page: img,a{ -webkit-touch-callout:none;}
(7) Common layout of
mobile terminal Mobile terminal technology selection:
1. Separate production of mobile page:
streaming layout
flex flexible layout
less+rem+ media query layout
mixed layout
2. Responsive page compatible with mobile terminal:
media query
bootstarp
(8) Flow layout (percentage layout)
by setting the width of the box as a percentage to expand and contract according to the width of the screen, it is not limited by fixed pixels, and the content is filled on both sides. The flow layout method is relatively common for mobile web development. Layout
max-width maximum width (max-height maximum height)
min-width minimum width (min-height minimum height)
(9) Picture format: DPG picture compression technology: JD.com independently developed and launched DPG picture compression technology, which can directly save users nearly 50% of browsing and greatly improve the speed of users' web pages.
webp picture format: a picture format developed by Google designed to speed up picture loading. The picture compression volume is about 2/3 of JPEG, and it can save a lot of server bandwidth resources and data space