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

原文:【百度地图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

posted on 2015-01-07 15:08 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4208515.html

【百度地图API】如何激发手机的高分辨率相关推荐

html5中高德、腾讯、百度地图api调起手机app
html 部分<div id="mapBg"><div class="mapTab"><a href="" c ...
用百度地图API打造方便自己使用的手机地图
有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
网页百度地图api，支持位置偏移
网页百度地图api,支持位置偏移需加载 jq <style type="text/css"> #allmap {width:100%; height:100%; bo ...
百度地图API实现地理围栏
地理围栏(Geo-fencing)是LBS的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界.当手机进入.离开某个特定地理区域,或在该区域内活动时,手机可以接收自动通知和警告.简单来说就是判断一个 ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
使用百度地图API来完成交大校园巴士时刻表
本文最初发布于我的个人博客:Jerry的乐园交大的校园巴士时刻表都只能在车站的站牌上查看.这对于需要出行的学生来说非常不方便,无法合理做好出行的安排.为了解决这个问题,我和同一个套件的两位同学一起完 ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...

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

【百度地图API】如何激发手机的高分辨率相关推荐

最新文章

热门文章