创建对更多大小的支持是一个问题，但您可以在CSS中使用@media queries来修复它。检查此示例代码：
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
通过此代码，您可以添加对所有设备的支持。 Check this link for getting more code for more browsers
功能，其可以使用：
- 宽度和高度：
(min-device-width : 768px) and (max-device-width : 1024px)
- 定位：
(orientation: landscape)或(orientation: portrait)
- 设备的像素比例：
(-webkit-device-pixel-ratio: 1.5)
编辑：
HTML：
<div id="header" data-role="header" data-position="fixed">
<span id="app_icon" alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left"></span>
<span id="brand_icon" alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right"></span><h1></h1>
</div>
变化img到span并添加标识。
CSS：
@media screen and (-webkit-device-pixel-ratio: 0.75) {
#app_icon {
width: 100px; /* Example size */
height: 100px; /* Example size */
background: url(pictures/app_logo_small.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 1) {
#app_icon {
width: 150px; /* Example size */
height: 150px; /* Example size */
background: url(pictures/app_logo_medium.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
#app_icon {
width: 200px; /* Example size */
height: 200px; /* Example size */
background: url(pictures/app_logo_large.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 2) {
#app_icon {
width: 300px; /* Example size */
height: 300px; /* Example size */
background: url(pictures/app_logo_xlarge.png);
}
}
有了这个例子，你可以改变你的代码，并修复它。希望这个帮助！
HTML：
<div id="header" data-role="header" data-position="fixed">
<img id="app-icon" src="pictures/app_logo.png" display="inline" />
</div>
的Javascript：
$(document).ready(function() {
if(window.devicePixelRatio == 0.75) {
$("#app-icon").attr('src', '/images/lpdi/app-icon.png');
}
else if(window.devicePixelRatio == 1) {
$("#app-icon").attr('src', '/images/mdi/app-icon.png');
}
else if(window.devicePixelRatio == 1.5) {
$("#app-icon").attr('src', '/images/hpdi/app-icon.png');
}
else if(window.devicePixelRatio == 2) {
$("#app-icon").attr('src', '/images/xpdi/app-icon.png');
}
}
通过CSS：使用媒体Queri
请我的代码 – prateek
更新的问题，哎你使用哪一种解决方案？从上面？ – MDroid
我推荐使用'-webkit敏设备象素ratio'代替固定比率'-webkit设备象素ratio'。 – givanse