"Baidu Map API" How to inspire high-resolution phone

Source: Internet
Author: User

The original: "Baidu Map API" How to inspire high-resolution phone

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.