1, first screen size is the screen diagonal length size is fixed 2, the development of units relative units encountered (that is, relative to the screen): PX Em pt absolute units (fixed size, regardless of the device screen): In cm3, pixel density pixel density refers to the number of pixels inside 1 inches, For example, 1-inch inside is 10px, there are usually two kinds of 163 (3GS) (4s) is usually more than 320 pixel density is high-definition screen, calculation method: screen resolution of the square + screen resolution wide square, and then open the root, then divided by the screen inch. 4, the device independent pixel device independent pixels represent a ratio of real pixels and resolution pixels, such as 3gs mobile phone height 480px, width 320px resolution, real device height 480px, width 320px, that is, resolution and real pixels of the same time 1pt = 1px But there are some devices height 960px, width 640px, resolution. Real device height 480px, width 320px, that is, the resolution is twice times the true pixels, 1pt = 2px. 5, physical pixels and CSS pixels 1, physical pixels (resolution of pixels) 960*640 2, CSS pixel (real pixel) simulator see 320*5686, viewport 1, viewport: The browser's visible width in the PC side is subject to change by the browser window 2, Viewport on the PC side is visible window (will change), there will be a fixed value on the mobile side, but usually default 980, 3, but the default mobile side of the time 980 will cause the page zoom or scroll bar 4, solve the mobile default viewport will cause the page zoom and scroll bar, Setting the META tag setting defaults to the width of the viewport equal to the width of the device 5, other properties of the viewport initialize scaling initial-scale=1.0 whether the user is allowed to scale user-scaleable=no, maximum maximum-scale= 1.0; and the minimum scaling minimum-scale=1.0; 6, META:VP + TAB usually write the mobile page, the first should add a viewport.
Screen adaptation problems in mobile Web development
