我开发了一个 Phonegap 应用程序，但在根据 Android 设备(设置宽度和高度)调整图像大小时遇到问题。随着设备高度和宽度的变化，我想更改图像大小。我为此使用了以下链接，但它不起作用 supporting multiple resolution and density of images in phonegap 我的代码如下
<!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 会像下面这样-
@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
}
您也可以结合使用宽度和分辨率媒体查询。
请搜索自适应网页设计和媒体查询你会得到很多东西。
关于android - 支持不同尺寸的手机间隙中的多分辨率图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19154583/