標籤：android style class blog c code
摘要：不少使用者使用百度地圖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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
