摘要：不少用戶使用百度地圖API開發在移動瀏覽器上的應用時發現，明明自己的手機是高分辨率的，但是顯示出來的地圖卻比較模糊，甚至“看不清楚”。接下來，我們要學習如何激發手機瀏覽器的高分辨率功能。
--------------------------------------------------------------------------------
以安卓手機為例，我們使用PhoneGap來寫一段API代碼。
代碼A：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Phonegap+API</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<style type="text/css">
#container{height:300px;width:300px;padding:0;margin:0;border:1px solid red;}
</style>
</head>
<body>
展示上海市地圖
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom("上海",12);
</script>
大家注意，地圖容器的高寬均為300px。
這個實驗的測試用機是HTC G7。屏幕分辨率為762*480。
從eclipse的log里也能看出G7的分辨率，如下圖：
那么代碼A運行出來是什么樣子呢？
運行出來之后，讓大家大吃一驚，“怎么滿屏了呢？”
如下圖：
如何解決高低分屏的分辨率問題？
因為HTC G7已經屬於高分辨率的屏幕了，所以普通級別不適合它。
大家有沒有注意代碼A里這句話：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
“user-scalable=no”是為了禁止用戶放大縮小瀏覽器窗口內的東西。因為百度地圖API提供了雙指放大縮小地圖的功能。
所以，同理，我們在這里加上“target-densitydpi=device-dpi”，就可以讓設備顯示自身的分辨率了。
類似的，還有“width=device-width”，自動調整設備寬度。
我們再來看看加上這段代碼之后的效果圖：
地圖縮小了吧。這才是HTC G7真實分辨率~
記得，要用以下代碼，設備就能顯示正常的分辨率了哦~
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
附PhoneGap安卓開發指南：http://www.phonegap.cn/?page_id=442#android