Absrtact: Many users use the Baidu Map API development in the mobile browser application, found that their mobile phone is high-resolution, but the display of the map is relatively vague, and even "can't see clearly." Next, we'll learn how to inspire high-resolution features in a mobile browser.
--------------------------------------------------------------------------------
Take the Android phone, for example, we use PhoneGap to write an API code.
Code A:
<!DOCTYPE HTML>
<HTML>
<Head>
<Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" />
<Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />
<title>Phonegap+api</title>
<Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Phonegap.js"></Script>
<Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=1.3"></Script>
<styletype= "Text/css">
#container{Height:300px;width:300px;padding:0;margin:0;Border:1px solid Red;}
</style>
</Head>
<Body>
Show Map of Shanghai city
<DivID= "Container"></Div>
</Body>
</HTML>
<Scripttype= "Text/javascript">
varMap= NewBmap.map ("Container");
Map.centerandzoom ("Shanghai", A);
</Script>
It is noted that the height and width of the map container are 300px.
The test machine for this experiment is HTC G7. The screen resolution is 762*480.
The G7 resolution can also be seen from the log of Eclipse, such as:
So what does code a run out to look like?
After running out, let everyone surprised, "how full screen it?" ”
Such as:
How to solve the resolution problem of high and low split screen?
Because HTC G7 already belongs to a high-resolution screen, the normal level is not suitable for it.
Do you have any attention to code A in this sentence:
<name= "Viewport" content= "initial-scale=1.0, User-scalable=no" />
"User-scalable=no" is to prevent users from zooming in on the contents of the browser window. Because Baidu Map API provides two-finger zoom to reduce the function of the map.
So, in the same vein, we add "target-densitydpi=device-dpi" here, so that the device can display its own resolution.
Similarly, there is "Width=device-width", which automatically adjusts the device width.
Let's take a look at the addition of this piece of code:
The map is shrinking. This is the true resolution of HTC G7 ~
Remember, to use the following code, the device will be able to display the normal resolution OH ~
<name= "Viewport" content= "initial-scale=1.0, User-scalable=no, target-densitydpi=device-dpi "/>
Companion PhoneGap Android Development Guide: http://www.phonegap.cn/?page_id=442#android
"Baidu Map API" How to inspire high-resolution phone
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
