1. Browser status

Common PC browsers: 360 browser, Google Chrome, Firefox, QQ Browser, Baidu Browser, Sogou Browser, and IE.

Common mobile browsers: UC browser, QQ browser, Openg browser, Baidu mobile browser, 360 security browser, Google Browser, Sogou mobile browser, Cheetah browser, and other miscellaneous browsers.

UC, QQ, Baidu and other mobile browsers in China are all kernel modified according to Webkit, but there is no kernel independently developed in China, just as the domestic mobile operating system is modified and developed based on Android.

Summary: Compatible with mainstream mobile browsers, processing Webkit kernel browsers.

2. The current situation of mobile phone screens

  • The screen size of mobile devices is very large and the fragmentation is serious.
  • Android devices come in a variety of resolutions: 480×800, 480×854, 540×960, 720×1280, 1080×1920, and the rumored 2K, 4K screens.
  • In recent years, the fragmentation of iPhone has also intensified. The main resolutions of its devices are: 640×960, 640×1136, 750×1334, 1242×2208, etc.
  • As a developer, you don’t have to worry about these resolutions, because our usual unit of size is PX.

3. Common mobile screen sizes

equipment Size (in.) Development size (PX) Physical Pixel Ratio (DPR)
iphone3G 3.5 320 * 480 1.0
iphone4/4s 3.5 320 * 480 2.0
iphone5/5s/5c 4.0 320 * 568 2.0
HTC One M8 4.5 360 * 640 3.0
iphone6 4.7 375 * 667 2.0
Nexus 4 4.7 384 * 640 2.0
Nexus 5x 5.2 411 * 731 2.6
iphone6 Plus 5.5 414 * 736 3.0
Samsung Galay Note 4 5.7 480 * 853 3.0
Sony Xperia Z Ultra 6.4 540 * 960 2.0
Nexus 7(’12) 7.0 600 * 960 1.3
iPad Mini 7.9 768 * 1024 1.0
  • Note: The above data are from reference
  • Material. IO/devices /.
  • Note: Dp, DPI, PT, PPI and other units are not recommended for front-end development.

4. Mobile debugging method

  • Chrome DevTools simulates mobile debugging
  • Set up a local Web server, mobile phone and server in a LAN, through mobile phone access to the server
  • Use an external server, direct IP or domain name access

5. To summarize

  • Mobile browser we are mainly compatible with the WebKit kernel
  • The mobile terminal we are currently developing is mainly for mobile terminal development
  • Now mobile fragmentation is serious, resolution and screen size is different
  • Learn how to use Google Chrome to simulate and debug the mobile interface