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

简介: 原文:【百度地图API】如何激发手机的高分辨率摘要:不少用户使用百度地图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

目录
相关文章
|
1月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
1月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
1月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
1月前
|
API
查询城市手机号段免费API接口教程
此API用于查询指定城市的手机号段、服务商、区号、邮编等信息。支持POST或GET请求,需提供用户ID、KEY及城市名称等参数。返回数据包括状态码、信息提示、查询数量、最大页码、当前页码、省份、城市、区号、邮编、区划代码及数据集等。示例中提供的ID和KEY为公共测试用,建议使用个人ID和KEY以获得更高的调用频率。
|
1月前
|
API
手机号段查询城市免费API接口教程
此接口用于根据手机号段查询相关信息,包括城市、运营商、区号等。支持POST和GET请求,需提供用户ID、KEY及手机号段前7位作为参数。返回数据包含状态码、信息提示及详细归属信息。示例请求地址:https://cn.apihz.cn/api/ip/haoduan.php?id=88888888&key=88888888&numbers=1321993。接口免费,建议使用个人ID与KEY以独享调用频次。
|
1月前
|
API
查手机号归属地免费API接口教程
此API用于查询指定手机号码的归属地信息,包括号段、省份、城市、运营商等。支持POST和GET请求方式,需提供用户ID、KEY及手机号作为参数。返回结果包含状态码、信息提示及详细归属地信息。示例请求地址:https://cn.apihz.cn/api/ip/shouji.php?id=88888888&key=88888888&phone=13219931963。
|
4月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
79 0
|
5月前
|
人工智能 搜索推荐 vr&ar
苹果手机iOS18最新升级:植入AI人工智能,国内百度文心一言,国外GPT4o来辅助
iOS 18亮点速览:AI强化的Siri、RCS安卓消息兼容、自定义主屏、辅助功能增强,VR进步,新隐私工具,包括锁定APP和眼动追踪。Passwords app保障安全,Apple Intelligence提升个性化体验。
236 1
|
5月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
295 0
|
6月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
495 0