H5 Mobile End-1

Iphone3:

Device Resolution: 320*480

Screen resolution: 320*480

iphone4:

Device Resolution: 320*480

Screen resolution: 640*960

Iphone5:

Device Resolution: 320*568

Screen resolution: 640*1136

Iphone6:

Device Resolution: 375*667

Screen resolution: 750*1334

Device Resolution : Indicates the size of the device

screen Resolution : How many pixels the phone screen is composed of

The screen resolution is larger, we need to solve: 1. When we put low-resolution images into the iphone's high-resolution device, it blurs, and high-resolution images appear jagged on low-resolution devices. Design according to the screen resolution size, It is theoretically best to make different designs based on different phones. How do you do it from a program?

window.devicepixelratio : Screen resolution/device resolution. Different pictures can be adjusted according to the different devices.

Mainstream screen resolution : 640*960 (Design draft size) 640*1136

viewport: The viewport, which is the area we see in the browser. Refers to the size of the display HTML page, and the screen resolution and device resolution is not much related. Default viewport

<meta name= "viewport" content= "Width=device-width, user-scalable=no,initial-scal=1" >

Highly adaptable:

Dynamic Setup via JS

Background-size:cover

H5 Mobile End-1