Search code examples
media-queriesbing-maps

Media query to resize bing map

I am using media queries to successfully resize/style various elements on a page when viewed on smart phone browsers.

The difficulty I run into is with Bing Maps. The map never resizes although the div it is within does. Inspecting the elements shows that the map element.style is set to 100% width and height.

I have included <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> to prevent browser zooming.

Any suggestions appreciated

Solution

  • I've done this before without any issues. Have you specified a CSS position on the map? Take a look at this code sample I put together: http://code.msdn.microsoft.com/Cross-Platform-Bing-Maps-e96600d5#content