JSP page Adaptive on mobile, Chrome browser is no problem, but Safari browser has problem solving method

Set in the Web page 1px and the physical pixel 1px will not be the same, so different on different phones display results are not the same, through the following settings to find a suitable for the current Web page adaptive different mobile phones, different browsers, the code is as follows:

“

<meta name= "viewport" content= "width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1, Maximum-scale=1,user-scalable=1 "/>"

The width=620px is the minimum width required for the content area of the Web page, which needs to be displayed in full screen on different phones, and the 1px in the CSS will be equal to 1px in the physical pixels when the target-densitydpi=device-dpi is set.

Add: Because Safari browser does not support target-densitydpi=device-dpi, so adding JS code automatically adjust the scale, the adjusted code:

“

<style type= "Text/css" > @viewport {zoom:1.0;width:620px;} @-ms-viewport{width:620px;zoom:1.0;} </style><meta name= "viewport" id= "Webviewport" content= "width=620px,initial-scale=1,target-densitydpi= Device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1 "/><meta name=" apple-mobile-web-app-capable " Content= "yes" ><meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" ><meta name= " Format-detection "content=" Telephone=no "><script language=" JavaScript ">if (screen.width<620) { document.getElementById (' Webviewport '). SetAttribute (' content ', ' width=620px,initial-scale= ' + screen.width/620 + ', Target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1 ');} </script>
”

Reprint: http://blog.csdn.net/aminfo/article/details/40895211

JSP page Adaptive on mobile, Chrome browser is no problem, but Safari browser has problem solving method