js判断设备是否为PC并调整图片大小

代码如下:

<html>
<head>
<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 AutoResizeImage(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){
AutoResizeImage(pcWidth, pcHeight, images[i]);
}else{
AutoResizeImage(appWidth, appHeight, images[i]);
}
}
}
window.onload=function(){
setImg('imgDIV',300,0,300,0);
}
</script>
</head>
<body>
<div id="imgDIV">
<img alt="" src="http://192.168.1.116:9999/ffzx/news/20140205/015212022_1.jpg" />
<div>
<img alt="" src="http://192.168.1.116:9999/ffzx/news/20140208/1386835169183.jpg" />
</div>
</div>
<br>
</body>
</html>

(0)

相关推荐

  • JS和css实现检测移动设备方向的变化并判断横竖屏幕

    方法一:用触发手机的横屏和竖屏之间的切换的事件 复制代码 代码如下: window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false); 方法二:监听调整大小的改变 复制代码 代码如下: window.addEventListener("resize", function() { // 得到屏幕尺寸 (内部/外部宽度,内

  • javascript判断移动端访问设备并解析对应CSS的方法

    本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel

  • JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-

  • js判断是否是移动设备登陆网页的简单方法

    复制代码 代码如下: var browser = {            versions: function () {                var u = navigator.userAgent, app = navigator.appVersion;                return {//移动终端浏览器版本信息                    trident: u.indexOf('Trident') > -1, //IE内核                  

  • js判断浏览器类型及设备(移动页面开发)

    下面主要用javascript代码来判断浏览器类型及设备访问该网页面,支持手机上的所有浏览器,具体代码如下. <!DOCTYPE html> <html> <head> <title>JS判断是什么设备是什么浏览器-www.jb51.net</title> <meta charset="utf-8"> <meta name="apple-touch-fullscreen" content=

  • Js如何判断客户端是PC还是手持设备简单分析

    在工作过程中,许多朋友会经常用到js判断客户端是PC还是手持设备,今天将提供以下方法function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var

  • JavaScript根据CSS的Media Queries来判断浏览设备的方法

    CSS 部分 首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值.这个类仅作为 JavaScript 读取使用,所以需要将其移出屏幕窗口,让浏览者不可见以免引起意外情况. 作为演示,下面代码设置了四种设备状态:桌面普通版.小屏幕桌面版.平板电脑版和手机版. /* default state */ .state-indicator { position: absolute; top: -999em; left: -999em; z-

  • js判断当前页面在移动设备还是在PC端中打开

    本文实例讲解了js判断当前页面在移动设备还是在PC端中打开的详细代码,分享给大家供大家参考,具体内容如下 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1,

  • JS如何判断移动端访问设备并解析对应CSS

    复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.lo

  • JSP判断移动设备的正则

    看到了一篇很好的文章, <在天猫,前端做什么?>,里面有天猫php判断移动设备的正则(个人猜测),觉得很好用,于是就决定移植到JSP里面. jsp文件名为 index.jsp,其实也可以使用过滤器来进行拦截,然后跳转到其他域名去. 完整代码如下: 复制代码 代码如下: <%@page import="java.util.regex.Matcher"%> <%@page import="java.util.regex.Pattern"%&

随机推荐