基于屏幕大小的可变图像宽/高

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

...or来确保它在源代码中看起来总是很漂亮...

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

您可以查看navigator.userAgent中是否出现字符串iPad或iPhone，并相应设置图片URL。