js控制不同设备图片的大小

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
	/* 判断设备是否为PC */
	function isPC() {
		var userAgentInfo = navigator.userAgent;
		var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
		var flag = true;
		for (var v = 0; v < Agents.length; v++) {
			if (userAgentInfo.indexOf(Agents[v]) > 0) {
				flag = false;
				break;
			}
		}
		return flag;
	}
	/* 调整图片大小 */
	function changeImgSize(maxWidth, maxHeight, objImg) {
		var img = new Image();
		img.src = objImg.src;
		var hRatio;
		var wRatio;
		var Ratio = 1;
		var w = img.width;
		var h = img.height;
		wRatio = maxWidth / w;
		hRatio = maxHeight / h;
		if (maxWidth == 0 && maxHeight == 0) {
			Ratio = 1;
		} else if (maxWidth == 0) {
			if (hRatio < 1)
				Ratio = hRatio;
		} else if (maxHeight == 0) {
			if (wRatio < 1)
				Ratio = wRatio;
		} else if (wRatio < 1 || hRatio < 1) {
			Ratio = (wRatio <= hRatio ? wRatio : hRatio);
		}
		if (Ratio < 1) {
			w = w * Ratio;
			h = h * Ratio;
		}
		objImg.height = h;
		objImg.width = w;
	}

	/* 设置不同设备的缩放策略  */
	function setImg(tagid, pcWidth, pcHeight, appWidth, appHeight) {
		var tag = document.getElementById(tagid);
		var images = tag.getElementsByTagName("img");
		for (var i = 0; i < images.length; i++) {
			if (isPC()) {
				changeImgSize(pcWidth, pcHeight, images[i]);
			} else {
				changeImgSize(appWidth, appHeight, images[i]);
			}
		}
	}
	window.onload = function() {
		var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		setImg('imgDIV', w, h, w, h);
	}
	window.onresize = function() {
		var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		setImg('imgDIV', w, h, w, h);
	}
</script>
</head>
<body style="background-color:#f7f1d7;margin: 0px 0px;padding: 0px 0px; ">
	<div id="imgDIV">${food.foodDescribe}</div>
</body>
</html>


你可能感兴趣的:(js控制不同设备图片的大小)