переменная ширина / высота изображения в зависимости от размера экрана

Question

Я работаю над веб-страницей с сенсорной панелью (для домашней автоматизации), которая будет работать на iPad и iPhone. Что меня интересует, так это возможность динамически устанавливать размер моих сенсорных иконок в зависимости от размера экрана.

Если я на iPad, мне нужны иконки размером 150 на 150 пикселей, но если я на iPhone, мне нужны иконки размером 75 на 75 пикселей.

Есть ли способ динамически устанавливать размеры изображений с помощью 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(' ');

Проверьте это .

CSS

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

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

Это предполагает, что ваши кнопки по умолчанию масштабируются в браузере -если у вас есть два разных изображения, вы можете изменить свойство background-image CSS.

Answer 2

Вы можете проверить, отображаются ли строки iPad или iPhone в navigator.userAgent, и соответственно задать URL-адрес изображения.

Answer 3

http://jquery -howto.blogspot.com / 2010/09 / iphone-ставку-детектирования с использованием-jquery.html Просто поменяйте iPod на iPad.