Mobile development foundation

note

We are mainly compatible with webkit for mobile browsers
The mobile terminal we are developing is mainly for mobile terminal development
The fragmentation of the mobile terminal is now serious, the resolution and screen size are different
Learn to use Google Chrome to simulate the phone interface and debug

1. Viewport

The viewport is the screen area where the browser displays the content of the page

Viewports are divided into layout viewports, visual viewports, and ideal viewports
What the mobile layout wants is the ideal viewport is how wide the mobile phone screen is, how wide our layout viewport is
For the ideal viewport, we need to add <meta>tags to our mobile page

Standard viewport parameter settings

The viewport width is consistent with the device
The default zoom ratio of the viewport is 0
Do not allow users to zoom by themselves
The maximum allowable zoom ratio is 1.0
The minimum allowable zoom ratio is 1.0

2. The ratio of physical pixels to physical pixels

Physical pixels refer to the smallest particles displayed on the screen, which exist physically and are set by the manufacturer at the factory
During the development process, 1px is not necessarily equal to one physical pixel
PC page, 1 px is equal to one physical pixel, but the mobile terminal is different
The number of physical pixels that a px can display is called the physical pixel ratio or screen pixel ratio

3. Multiple images

For a 50px*50px picture, when the retina screen is opened on the phone, it will be enlarged according to the physical pixel ratio, which will cause the picture to be blurred
In the standard viewport settings, use the double image to improve the picture quality and solve the blur problem in high-definition equipment.
Usually use double picture , because of the influence of iphone6\7\8, there are still 3 times picture and 4 times picture, depending on the company's needs.
The background image should also use multiple images

4. Mobile terminal development options

The common mobile development in the market now includes separate production of mobile pages and responsive pages
Now the mainstream choice is: make a separate mobile page

5. Solutions to common problems

1. Browser compatibility issues

Mobile browsers are basically based on the webkit core, so we only need to consider the compatibility of webkit, and we can use H5 tags and css3 styles with confidence. Colleagues, the private prefix of our browser, we only need to consider adding -webkit-

2, CSS initialization normalize.css

It is recommended to use normalize.css for mobile terminal css initialization. It is a customizable CSS file, which allows different browsers to render web page elements in a more unified form. It is a modern, high-quality alternative for HTML5

advantage

Protected valuable default values
Fixed browser bugs and solved the inconsistent default styles of browsers
Modularity provides ease of use
There is a very detailed document

3. CSS3 box model box-sizing

Traditional mode width calculation: box width=width+border+padding (extended expansion)

CSS3 box width calculation: box width = width (internal subtraction)

how to choose?

The mobile terminal can all css3 box models
If compatibility is completely required on the PC side, the traditional mode is used. If compatibility issues are not considered, the CSS3 box model is chosen.

4. Special style

/*
* css3盒子模型
*/
box-sizing:border-box;
-webkit-box-sizing:border-box;

/*禁止长按页面时弹出菜单*/
img,a{
    
    
  -webkit-touch-callout:none
}

/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;

/*点击高亮我们需要清除，设置为transparent完成透明*/
-webkit-tap-highlight-color:transparent;

Big front-end foundation ~ mobile development foundation