joehwang/指定元素自適應寬高-em或css transform scale.html

## 指定元素自適應寬高-em或css transform scale.html
<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
</head>
<body>
<style type="text/css">
  body{
    margin:0px;
    font-size:50px;
    overflow: hidden;
}
.filed{
  display:inline-block;
  width:1em;
  height:1.6em;
  background-color:yellowgreen;
  margin-right: 0.04em;
}
#amibe-container{
  width: 7.2em;
  height:12.8em;
  background-color:lightblue;
  position: absolute;

}

#bg{
  width:100%;
  height:100%;
  overflow:hidden;
  background-color: gray;
}
img{
  width:2em;
}
</style>
<script type="text/javascript">
// 360 x 640
// left:calc(50% - 7.2em/2);
// top:calc(50% - 12.8em/2);
var amibeLayout = amibeLayout || {};
amibeLayout.core={
  basefontsize:this.basefontsize || parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size')),
  base_w:0,
  base_h:0,
  spaceing:0,
  target:"",
  scaletype:"cssts", //em or cssts
  init:function(_target,_spaceing){
    this.base_w=document.getElementById(_target).offsetWidth;
    this.base_h=document.getElementById(_target).offsetHeight;
    this.spaceing=_spaceing
    this.target=document.getElementById(_target)
    this.resizecanvas("em")
    return this
  },
  resizecanvas:function(){
    //使用css em 實作andrioid browser可支援，縮放倍率有限制
    var amibeCanvas = this.target
    var newWidth = (window.innerWidth-this.spaceing)
    var newHeight = (window.innerHeight-this.spaceing)
    var wrate=newWidth/this.base_w
    var hrate=newHeight/this.base_h
    var rate=1
    var top,left=0
    if (wrate>hrate) {
      rate=hrate
    }else{
      rate=wrate
    }
    if(this.scaletype=="em"){
      //改變body的fonsize就能放大縮小所有em單位
      document.body.style.fontSize=this.basefontsize*rate+"px";
      //left:calc(50% - 7.2em/2);的實現
      amibeCanvas.style.left=(window.innerWidth/2)-(this.base_w/this.basefontsize/2)*(this.basefontsize*rate) + "px";
      //top:calc(50% - 12.8em/2);的實現
      amibeCanvas.style.top=(window.innerHeight/2)-(this.base_h/this.basefontsize/2)*(this.basefontsize*rate) + "px";
    }
    else if(this.scaletype=="cssts"){
      //使用css transform scle實作方便快速、andriod browser 4.2不支援
     amibeCanvas.style.transform="scale("+rate+")"
     left=(window.innerWidth/2)-this.base_w/2 + "px";
     top=(window.innerHeight/2)-this.base_h/2 + "px";
     amibeCanvas.style.left=left
     amibeCanvas.style.top=top
    }
  },
  resizebycssts:function(){
    var amibeCanvas = this.target
    var newWidth = (window.innerWidth-this.spaceing)
    var newHeight = (window.innerHeight-this.spaceing)
    var wrate=newWidth/this.base_w
    var hrate=newHeight/this.base_h
    var rate=1
    var top,left=0
    if (wrate>hrate) {
      rate=hrate
    }else{
      rate=wrate
    }
  }
}


document.addEventListener('DOMContentLoaded', function () {
  //init("amibe-container",0);
 var layout= amibeLayout.core.init("amibe-container",50)

 window.addEventListener('resize', function(){layout.resizecanvas()}, false);
 window.addEventListener('orientationchange',  function(){layout.resizecanvas()}, false);
}, false );

</script>
<div id="bg">
  <div id="amibe-container">
    <div id="item">
      <div id="filed-1" class="filed"></div>
      <div id="filed-2" class="filed"></div>
      <div id="filed-3" class="filed"></div>
      <div id="filed-4" class="filed"></div>
      <img src="http://i.imgur.com/GDyvZZf.gif">
      <img src="http://i.imgur.com/GDyvZZf.gif">
      <img src="http://i.imgur.com/GDyvZZf.gif">
      <img src="http://i.imgur.com/GDyvZZf.gif">
    </div>
  </div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>test</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
	</head>
	<body>
	<style type="text/css">
	body{
	margin:0px;
	font-size:50px;
	overflow: hidden;
	}
	.filed{
	display:inline-block;
	width:1em;
	height:1.6em;
	background-color:yellowgreen;
	margin-right: 0.04em;
	}
	#amibe-container{
	width: 7.2em;
	height:12.8em;
	background-color:lightblue;
	position: absolute;

	}

	#bg{
	width:100%;
	height:100%;
	overflow:hidden;
	background-color: gray;
	}
	img{
	width:2em;
	}
	</style>
	<script type="text/javascript">
	// 360 x 640
	// left:calc(50% - 7.2em/2);
	// top:calc(50% - 12.8em/2);
	var amibeLayout = amibeLayout \|\| {};
	amibeLayout.core={
	basefontsize:this.basefontsize \|\| parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size')),
	base_w:0,
	base_h:0,
	spaceing:0,
	target:"",
	scaletype:"cssts", //em or cssts
	init:function(_target,_spaceing){
	this.base_w=document.getElementById(_target).offsetWidth;
	this.base_h=document.getElementById(_target).offsetHeight;
	this.spaceing=_spaceing
	this.target=document.getElementById(_target)
	this.resizecanvas("em")
	return this
	},
	resizecanvas:function(){
	//使用css em 實作andrioid browser可支援，縮放倍率有限制
	var amibeCanvas = this.target
	var newWidth = (window.innerWidth-this.spaceing)
	var newHeight = (window.innerHeight-this.spaceing)
	var wrate=newWidth/this.base_w
	var hrate=newHeight/this.base_h
	var rate=1
	var top,left=0
	if (wrate>hrate) {
	rate=hrate
	}else{
	rate=wrate
	}
	if(this.scaletype=="em"){
	//改變body的fonsize就能放大縮小所有em單位
	document.body.style.fontSize=this.basefontsize*rate+"px";
	//left:calc(50% - 7.2em/2);的實現
	amibeCanvas.style.left=(window.innerWidth/2)-(this.base_w/this.basefontsize/2)(this.basefontsizerate) + "px";
	//top:calc(50% - 12.8em/2);的實現
	amibeCanvas.style.top=(window.innerHeight/2)-(this.base_h/this.basefontsize/2)(this.basefontsizerate) + "px";
	}
	else if(this.scaletype=="cssts"){
	//使用css transform scle實作方便快速、andriod browser 4.2不支援
	amibeCanvas.style.transform="scale("+rate+")"
	left=(window.innerWidth/2)-this.base_w/2 + "px";
	top=(window.innerHeight/2)-this.base_h/2 + "px";
	amibeCanvas.style.left=left
	amibeCanvas.style.top=top
	}
	},
	resizebycssts:function(){
	var amibeCanvas = this.target
	var newWidth = (window.innerWidth-this.spaceing)
	var newHeight = (window.innerHeight-this.spaceing)
	var wrate=newWidth/this.base_w
	var hrate=newHeight/this.base_h
	var rate=1
	var top,left=0
	if (wrate>hrate) {
	rate=hrate
	}else{
	rate=wrate
	}
	}
	}


	document.addEventListener('DOMContentLoaded', function () {
	//init("amibe-container",0);
	var layout= amibeLayout.core.init("amibe-container",50)

	window.addEventListener('resize', function(){layout.resizecanvas()}, false);
	window.addEventListener('orientationchange', function(){layout.resizecanvas()}, false);
	}, false );

	</script>
	<div id="bg">
	<div id="amibe-container">
	<div id="item">
	<div id="filed-1" class="filed"></div>
	<div id="filed-2" class="filed"></div>
	<div id="filed-3" class="filed"></div>
	<div id="filed-4" class="filed"></div>
	<img src="http://i.imgur.com/GDyvZZf.gif">
	<img src="http://i.imgur.com/GDyvZZf.gif">
	<img src="http://i.imgur.com/GDyvZZf.gif">
	<img src="http://i.imgur.com/GDyvZZf.gif">
	</div>
	</div>
	</div>
	</body>
	</html>