原文:【百度地图API】如何激发手机的高分辨率

摘要：不少用户使用百度地图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
												


											
【百度地图API】如何激发手机的高分辨率的更多相关文章
	

    
						
  1. html5中高德、腾讯、百度 地图api调起手机app
		
    html 部分 <div id="mapBg"> <div class="mapTab"> <a href="" ...
    
		
    2. 
								
  2. 【百度地图API】手机浏览器抓包工具及其使用方法
		
    原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...
    
		
    3. 
						
  3. 用百度地图API打造方便自己使用的手机地图
		
    有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...
    
		
    4. 
						
  4. 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置
		
    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...
    
		
    5. 
						
  5. 百度地图API和高德地图API资料集锦
		
    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
    
		
    6. 
						
  6. 安卓调用百度地图api 错误 mcode参数不存在
		
    自己的手机app里用到了百度地图sdk,希望根据手机获得的坐标来逆向到百度地图的坐标. 根据api文档拼写了url,因为是移动端,说是要添加mcode参数,然后我的url看起来如下: http://a ...
    
		
    7. 
						
  7. 如何在网页中调用百度地图api
		
    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
    
		
    8. 
						
  8. 百度地图api（摘自百度）
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
    
		
    9. 
						
  9. 网页百度地图API相关资料
		
    百度地图API——网页URI接口.手机网页点击直接导航:js生成一个地图网页 或 直接跳转到百度导航界面 http://developer.baidu.com/map/index.php?title= ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. android登陆接口调试
			
    最近项目要开始调API,于是自己写了个关于登陆界面调试的Demo,为了保护项目,接口文档里面的内容都是被我改过的,不涉及任何项目内容.当然,代码在运行成功后,上传至博客前,相应内容我也根据改过后的文档 ...
    
			
    2. 
						
  2. SRM 620 D2L3: RandomGraph, dp
			
    称号:http://community.topcoder.com/stat? c=problem_statement&pm=13143&rd=15853 參考:http://apps. ...
    
			
    3. 
						
  3. MySQLHA系列MHA（一）
			
    MHA,这是Master High Availability Manager and Tools for MySQL,一个日本MySQL专家们使用Perl语言编写的一个脚本管理工具.该工具仅适用于My ...
    
			
    4. 
						
  4. 开源Math.NET基础数学类库使用(08)C#进行数值积分
			
    原文:[原创]开源Math.NET基础数学类库使用(08)C#进行数值积分               本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4 ...
    
			
    5. 
						
  5. poj 2762 Going from u to v or from v to u? (推断它是否是一个薄弱环节图)
			
    意甲冠军:给定一个有向图有m单向边缘.免费推断是否两点起来(a可以b要么b可以a或最多彼此),该请求 弱联通重量. 算法: 缩点求强连通分量.然后又一次建图.推断新图是否是一条单链,即不能分叉,假设分 ...
    
			
    6. 
						
  6. cocos2d-x -- 渠道SDK【棱镜】接入(1)
			
    棱镜SDK简单介绍 若想让游戏上线,渠道接入步骤是不可缺少的,为了避免一对一接入渠道问题,我选择了棱镜SDK,由于棱镜是游戏与渠道SDK的中间层,为CP厂商屏蔽各个渠道SDK之间的差异,整个接入过程, ...
    
			
    7. 
						
  7. 【IPC第二个进程间通信】管道Pipe
			
    IPC进程间通信+管道Pipe                IPC(Inter-Process Communication,进程间通信).         管道用于进程间共享数据,事实上质是共享内存 ...
    
			
    8. 
						
  8. A == B ?（杭州电2054）
			
    A == B ? Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...
    
			
    9. 
						
  9. POJ2112Optimal Milking（二分法+floyd最短+网络流量）
			
    职务地址:http://poj.org/problem?id=2112 近期忙着预习课本备考,没怎么刷题.(我是真的有在好好看书..)不敲题还是手痒痒.立即就邀请赛了,还是每晚睡觉前都拿来刷题吧.白天 ...
    
			
    10. 
						
  10. 世界杯推动彩票APP爆发，谁将会笑到最后？
			
        巴西世界杯的火爆上演不只给球迷们带来了一场华丽的足球盛宴,对网络彩票行业而言,这也是一次千载难逢的商机. 只是,并不是全部玩家都能攫取理想的商业利益,网络彩票的角逐宛如世界杯的比赛一样,有人晋 ...
    
			
    11.