Create adaptive zoom display on mobile phone with JS_javascript skills-JS Tutorial-php.cn

Create adaptive zoom display on mobile phone with JS_javascript skills

WBOY

Release： 2016-05-16 15:55:43

Original

1258 people have browsed it

JS to create adaptive zoom display on mobile phone

Example 1:

<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>

Copy after login

Example 2:

<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>

Copy after login

Example 3:

<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" name="format-detection">

Copy after login

Summary:

1. It’s actually not difficult. First, add a line of viewport meta tags at the head of the web page code.

2. Do not use absolute width. Since the web page will adjust the layout according to the screen width, you cannot use the layout of absolute width, nor can you use elements with absolute width.

3. Relative-sized fonts. Fonts cannot use absolute sizes (px), but only relative sizes (em).

4. Fluid grid The meaning of "fluid grid" is that the position of each block is floating and not fixed.
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }

5. Adaptive image (fluid image) In addition to layout and text, "adaptive web design" must also implement automatic scaling of images.

The above is the entire content of this article, I hope you all like it.