JS making mobile phone-side adaptive zoom display _javascript skills

JS to make mobile phone-side adaptive zoom display

Example one:

<script>
var _width = parseint (window.screen.width);
var scale = _width/640;
var ua = Navigator.userAgent.toLowerCase ();
var result =/android (\d+\.\d+)/.exec (UA);
if (result) {
var version = parsefloat (result[1]);
if (version>2.3) {
document.write (' <meta name= ' viewport "content=" width=640, Minimum-scale = ' +scale+ '), Maximum-scale = ' +scale+ ', target-densitydpi=device-dpi ' > ';
} else{
document.write (' <meta name= "viewport" content= "width=640, target-densitydpi=device-dpi" > ");
else {
document.write (' <meta name= ' viewport ' content= ' width=640, User-scalable=no, target-densitydpi= device-dpi ">");
}
</script>

Example two:

<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.7.2.min.js" ></script>
< Script type= "Text/javascript" >
$ (function () {
 if (Navigator.userAgent.match (/iphone/i) | | Navigator.userAgent.match (/ipad/i)) {
  var Viewportmeta = document.queryselector (' meta[name= ' viewport '] ');
   if (Viewportmeta) {
    viewportmeta.content = ' Width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0 ';
  Document.addeventlistener (' Touchstart ', function () {
   viewportmeta.content = ' Viewportmeta.content = width= Device-width, minimum-scale=0.25, maximum-scale=1.6 ';
  }, False);
   Document.addeventlistener (' Orientationchange ', function () {
   viewportmeta.content = ' Viewportmeta.content = Width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0 ';
  }, False);}}
;
</script>

Example three:

<meta charset= "UTF-8" >
<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=0 "name=" viewport ">
<meta content=" yes "name=" apple-mobile-web-app-capable ">
< Meta content= "BLACK" name= "Apple-mobile-web-app-status-bar-style" >
<meta content= "Telephone=no" Format-detection ">

Summarize:

A. It is not difficult indeed. First, in the head of the page code, add a line of viewport meta tags.

<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

Two. Do not use absolute width because the page adjusts the layout according to the screen width, you cannot use an absolute width layout, and you cannot use an element with an absolute width.

Three. The relative size of the font font can not use absolute size (px), but only relative size (EM).

Four. Mobile layout (fluid grid) "flow layout" means that the position of each block is floating, not fixed.
. main {float:right; width:70%;} leftbar {float:left; width:25%;}

Five. Image adaptive (fluid image) In addition to layout and text, "Adaptive web Design" must also achieve the automatic scaling of pictures.

The above is the entire contents of this article, I hope you can enjoy.