Detailed design dimensions and dimensions in mobile web

Today, all mobile devices are of different sizes, and the response to mobile Web is a challenge

The following are the dimensions of some of the current major devices:

All devices can be summarized as:

Equipment	Resolution	Web Size	Magnification	Meta label
Iphone4-4s	640x960px	320x480px	0.5	<meta content= "Width=device-width, initial-scale=0.5, maximum-scale=0.5, User-scalable=no; "name=" viewport ">
iphone5-5s-5c	640x1136px	320x568px	0.5	<meta content= "Width=device-width, initial-scale=0.5, maximum-scale=0.5, User-scalable=no; "name=" viewport ">
IPhone6	750x1334px	375x667px	0.5	<meta content= "Width=device-width, initial-scale=0.5, maximum-scale=0.5, User-scalable=no; "name=" viewport ">
IPhone6 Plus	1242x2208px	414x736	0.3333333333333333	<meta content= "Width=device-width, initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, User-scalable=no; "name=" viewport ">
ipad Mini	1024x768px	1024x768px	1	<meta content= "Width=device-width, initial-scale=1, Maximum-scale=1, User-scalable=no; "name=" viewport ">
Android devices	-	-	1	<meta content= "Width=device-width, initial-scale=1, Maximum-scale=1, User-scalable=no; "name=" viewport ">

Mobile-side font size html{font-size:62.5%;}

When using the font size in other elements, the unit is REM and the conversion to pixels is 10, which means that the font size in the design diagram is Font-size 2.5rem in 25px,css.

Detailed design dimensions and dimensions in mobile web