Current Status of Mobile Development
- Mobile web development refers to the development of web pages that need to be adapted to mobile devices
- There is no essential difference between mobile web development and PC-side web development, and HTML/CSS/JavaScript technologies are still used
The difference between mobile and PC web development
1. Different browsers
The mobile browser is different from the PC
谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器百度手机浏览器360安全浏览器搜狗浏览器猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。
因此在移动端，css3属性只需要加webkit前缀即可。
2. Screen size
The sizes of mobile devices are different (there are many sizes, and the fragmentation is very serious)
Android： 320*480 480*800540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：640*960 640*1136 750*1334 1242*2208
3. Layout
Features of the mobile terminal
- The compatibility problem of the mobile terminal is much smaller than that of the PC terminal, because the browser version of the mobile terminal is relatively new (the support for H5 is better)
- The screen of the mobile phone is relatively small, and the content that can be displayed is relatively small.
Question: How to solve the problem of inconsistent screen size during layout?
- On the PC side, the version center is fixed, so that the version center of all computers with all resolutions is the same, such as Jingdong
- Mobile terminal: The mobile terminal cannot set the version center, because the screen of the mobile device itself is small, and it is not appropriate to set the version center. Therefore, most mobile terminals will adopt a fluid layout (percentage layout)
Flow layout, also called percentage layout, is one of the layout methods often used in mobile terminal development.
Characteristics of a fluid layout:
- Adaptive width, fixed height, not 100% restore design
The flow layout cannot restore the design drawings very realistically for all devices, and the display effect of some devices is not particularly good-looking. However, the flow layout is a very common layout method on the mobile terminal. It is relatively simple and needs to be mastered (Ctrip, JD.com)
Mobile Debugging Issues
1. Simulator debugging
2. Real machine debugging: use a mobile phone to access.
There are all kinds of mobile devices, and the screen sizes are very different, especially on the Android side, which brings some troubles to our page preview. In actual work, as a developer, it is impossible to have enough equipment for us to test ( except for the testing department ). Even if there is, the efficiency is particularly low. Therefore, developers generally simulate different equipment.
at last
Recently, I also sorted out a JavaScript and ES note, a total of 25 important knowledge points, and explained and analyzed each knowledge point. It can help you quickly master the relevant knowledge of JavaScript and ES, and improve work efficiency.
Friends in need, you can click the card below to receive and share for free