Introduction to viewport compatibility on mobile devices

The viewport on mobile devices is divided into layout viewport and visual viewport 和 ##ideal viewport Three categories,

The ideal viewport is the most suitable viewport for mobile devices, ideal The width of the viewport is equal to the screen width of the mobile device. As long as the width of a certain element is set to the width of the ideal viewport in CSS (unit is px), then the width of this element is the width of the device screen, that is, the width is 100%. Effect.

The significance of ideal viewport is that no matter what screen resolution, those websites designed for ideal viewport can be perfectly presented without the need for users to manually zoom or horizontal scroll bars. to users.

Because the ideal viewport width of all iPhones is 320px, the simple and crude way to adapt the H5 page to all iPhones and Android models is to set the viewport

meta viewport tag was first introduced by Apple The company introduced it in its Safari browser to solve the viewport problem on mobile devices. Later, Android and major browser manufacturers also followed suit and introduced support for meta viewport. Facts have also proved that this thing is still very useful. In Apple's specifications, the meta viewport has 6 attributes (let's call those things in the content attributes and values), as follows:

widthSet the width of initial-scaleSet the initial zoom value of the page, which is a number, and can include decimals minimum-scaleThe minimum zoom value allowed for the user, which is a number , with decimals allowed maximum-scale The maximum zoom value allowed to the user is a number, with decimals allowed heightSet the height of ##user -scalableThese properties are OK They can be used at the same time, alone or mixed. When multiple attributes are used at the same time, just separate them with commas.

	layout viewport to a positive integer, or the string "width-device"
	layout viewport. This property is not important to us and is rarely used
Whether the user is allowed to zoom, the value is "no" or "yes", no means not allowed, yes means allowed

The above is the detailed content of Introduction to viewport compatibility on mobile devices. For more information, please follow other related articles on the PHP Chinese website!