【百度地圖API】如何激發手機的高分辨率

時間 2019-11-12

標籤百度地圖API 如何激發手機高分辨率简体版

原文原文鏈接

摘要：很多用戶使用百度地圖API開發在移動瀏覽器上的應用時發現，明明本身的手機是高分辨率的，可是顯示出來的地圖卻比較模糊，甚至「看不清楚」。接下來，咱們要學習如何激發手機瀏覽器的高分辨率功能。javascript

--------------------------------------------------------------------------------css

以安卓手機爲例，咱們使用PhoneGap來寫一段API代碼。html

代碼A：java

<!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。android

這個實驗的測試用機是HTC G7。屏幕分辨率爲762*480。api

從eclipse的log裏也能看出G7的分辨率，以下圖：瀏覽器

那麼代碼A運行出來是什麼樣子呢？eclipse

運行出來以後，讓你們大吃一驚，「怎麼滿屏了呢？」post

以下圖：學習

如何解決高低分屏的分辨率問題？

由於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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。