基于屏幕尺寸的可变图像宽度/高度

Question

我正在开发一款可在iPad和iPhone上运行的触摸屏网页（用于家庭自动化）。我想知道的是能够根据屏幕大小动态设置触摸图标的大小。

如果我在iPad上，我需要150px到150px的图标，但如果我在iPhone上，我需要图标为75px×75px。

有没有办法使用jQuery动态设置图像大小？

Answer 1

查看用户代理字符串，然后相应地设置它们。

我会这样做......

JavaScript / jQuery

if (navigator.userAgent.match(/iPhone/)) {
   $('body').addClass('iphone');
} else if (navigator.userAgent.match(/iPad/)) {
   $('body').addClass('ipad');
}

如果你只是为此使用jQuery，你可以用......替换那些addClass()行来减少​​一些膨胀。

var body = document.getElementsByTagName('body')[0];
body.className = body.className + ' iphone';

...或者确保它在源头看起来很漂亮......

var body = document.getElementsByTagName('body')[0];
var bodyClasses = body.className.split(' ');
bodyClasses.push('iphone');
body.className = bodyClasses.join(' ');

Check it out

CSS

.ipad #nav button {
   width: 150px;
   height: 150px;
}

.iphone #nav button {
   width: 75px;
   height: 75px;
}

这假设您的按钮默认会在浏览器中缩放 - 如果您有两个不同的图像，则可以更改background-image CSS属性。

Answer 2

http://jquery-howto.blogspot.com/2010/09/iphone-ipod-detection-using-jquery.html 只需将iPod改为iPad即可。

Answer 3

您可以检查字符iPad或iPhone是否出现在navigator.userAgent中，并相应地设置图片网址。