Я разработал приложение Phonegap, и у меня проблема с изменением размера изображения в соответствии с Android-устройством (ширина и высота). По мере изменения размера и ширины устройства я хочу изменить размер изображения. Я использую ниже ссылку для этого, но он не работает, поддерживая множественное разрешение и плотность изображений в телефоне. Мой код выглядит так:
<!DOCTYPE html>
<html>
<head>
<title>Worklist</title>
<meta charset="utf-8" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if(window.devicePixelRatio == 0.75) {
$("#dIcon_notification").attr('src', '/images/mpdi/my_notification_new.png');
}
else if(window.devicePixelRatio == 1) {
$("#dIcon_notification").attr('src', '/images/mdpi/my_notification_new.png');
}
else if(window.devicePixelRatio == 1.5) {
$("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png');
}
else if(window.devicePixelRatio == 2) {
$("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png');
}
}
</script>
</head>
<body>
<div data-role="page" data-theme="f">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-position="fixed">
<h1 style="white-space:pre-wrap" aria-level="1" role="heading" tabindex="0" class="ui-title" >Smart Self Service</h1>
</div><!--/header-->
<div data-role="content" data-theme="f">
<div id="center_content" >
<div id="dashboard">
<a href="Notification.html" data-ajax="false" ><img id="dIcon_notification" display="inline" src="images/hdpi/my_notification_new.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_request" src="images/hdpi/new_request_new.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_setting" src="images/hdpi/setting.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_exit" src="images/hdpi/exit.png" class="dashaboard_icon" alt="" ></a>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Я новичок в JQuery и CSS, поэтому каждая помощь будет заметна. Я хочу это решить. пожалуйста помоги
Решение, которое вы использовали, будет работать для разных разрешений. как обычный и сетчатый дисплей. Если вы хотите изменить размеры изображений в соответствии с размерами устройства (но с теми же разрешениями), вы можете использовать мультимедийные запросы CSS 3 и применять различные css на устройствах различного размера.
ваш css перейдет под нечто вроде this-
@media screen and (min-device-width : 480px) and (max-device-width : 854px){
//css for devices whose width is more than 480px but less than 854px
}
вы также можете использовать комбинацию запросов ширины и разрешения.
Пожалуйста, ищите адаптивные веб-дизайн и медиа-запросы, и вы получите много нового.
images
тогда как в вашем JavaScript они представляют собой/images
. Может ли это быть проблемой?