【百度地图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 开发工具
Android 按照步骤接入百度地图API,定位显示不了解决办法
Android 按照步骤接入百度地图API,定位显示不了解决办法
55 0
|
2月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
236 0
|
2月前
|
前端开发 小程序 API
微信小程序2.9.0基础库canvas2D新API,生成海报保存到手机功能实现
微信小程序2.9.0基础库canvas2D新API,生成海报保存到手机功能实现
103 0
|
2月前
|
安全 搜索推荐 API
提高营销效率的关键:快速创建有效的手机在网状态 API 接口
手机在网状态API接口是实现手机号码或设备在网状态验证的重要工具。通过与移动网络服务提供商的通信,开发人员和企业可以快速准确地验证手机号码的有效性、实现实名认证、增强欺诈检测和进行业务控制。手机在网状态API接口的广泛应用将为各种应用和服务提供更可靠、安全和个性化的用户体验。
33 0
|
3月前
|
数据挖掘 API
手机在网状态API 查询功能分析
手机在网状态API 查询功能分析
53 1
|
5月前
|
安全 5G API
使用手机在网状态查询 API 有效防止虚假注册的设计思路
随着移动互联网的普及,手机在网状态成为重要的数据指标。在网状态反映了手机用户的实际使用情况,对于各类企业和机构具有重要意义。 本文将为大家介绍手机在网状态 API 的主要特点和优势,并且探讨手机在网状态 API 的应用场景和效果展示,最后一起展望手机在网状态 API 的未来发展和应用前景。
53 0
|
5月前
|
安全 API
手机在网时长API接口,选择的时候应该注意什么?
随着移动互联网的普及,越来越多的情景需要使用手机号码。因此,手机号码状态查询功能也变得越来越流行,其中最常用的是手机在网时长查询。
|
6月前
|
机器学习/深度学习 人工智能 文字识别
从地图到手机通讯到ChatGPT,你想要的免费 API 都给你整理好了
在今天的科技世界中,API(Application Programming Interface)已经成为现代应用程序不可或缺的一部分。它们提供了许多强大的功能,让开发人员可以轻松地集成其他应用程序的功能,从而快速构建出色的应用程序。
190 0
从地图到手机通讯到ChatGPT,你想要的免费 API 都给你整理好了
|
6月前
|
安全 Java API
手机号码归属地 API 实现防止骚扰电话,看这一篇就够了(内附设计思路和代码)
本文将会深入探讨如何利用手机号码归属地 API 在防止电话骚扰,此外,还会给大家列出手机号码归属地 API 的其他应用场景。
213 0
手机号码归属地 API 实现防止骚扰电话,看这一篇就够了(内附设计思路和代码)
快速简单对接【手机三要素实名认证】API接口
很多同学课程中都需要练习API接口对接,这里告知一个免费获取实名认证API接口的途径,也提供简单对接的使用方法。
快速简单对接【手机三要素实名认证】API接口
相关产品
云迁移中心
推荐文章
更多