I am developing a mobile OpenLayers web site which uses the Google Maps Street layer. My problem is that it is almost impossible to read annotations on current generation high resolution displays.
The static Google Maps API (v2) featured a scale option to allow for high resolution screens. Is there anything to scale up the display Google Maps within OpenLayers?
I target specifically the Chrome browser on Android devices.
Cheers,
Dennis
Being fairly new to mobile web development I forgot to set a width as a meta tag in the site head. Defining a width fixes the styling problem on high resolution devices.
<head runat="server">
<meta name="viewport" content="width=500px" />
</head>
Related
I'm using Google maps in my Phonegap project for WP8.1 and Android.
On Android everything works fine but on WP, I have problem with imaging.
When I move with map, the map is broken and confusing - an example is in
the images below.
I use Microsoft 535 device(if this is relevant for the solution).
Difficult to say without code.
But maybe it has something to do with the layout.
The Map should be inside of a layout that set it's width and height according to the phone size. If the layout container is too small, the map and all the other UI might seem distorted.
Internet Explorer doesn't support the device-height in the viewport meta tag.(1)
Or check this out!
I have the same problem.
I solved it by retargeting my project from WP 8.0 to WP 8.1
http://i.imgur.com/tDRnu5f.png
This is the same problem
I have a Flex Mobile application that is making use of StageWebView to load a local HTML file.
I have been debugging it on my PC using the inbuilt Emulator (simulating a Galaxy S3 screen, 1280x720, 320dpi) and on my actualy S3.
The app has the StageWebView viewPort set to a rectangle that uses the stageHeight and stageWidth. (1280x720)
On the PC, it displays the HTML file fully (the HTML file has a background image that is 1280x720) and there is no scrolling.
On my phone however, the webview shows the HTML file "zoomed" in (I say zoomed in, but you cannot in fact, zoom out!) and I has to scroll to view all the content. The content appears at twice the size (If i set the background image to 360x640, it fits on the phone screen without scrolling)
Why would the emulator, set to the same resolution and DPI, show the content differently?
More importantly, why is my phone seemingly "zooming" in on the HTML file and making me scroll? The content and phone resolution match, yet StageWebView does not seem to understand.
I found this post, click me, that seems to suggest there is a bug, however the guy mentions his issue is when he doesn't use the viewport meta tag, which I am using!
Does any one know how I can go about fixing my scaling issues and hopefully have my Flex application scale nicely over various devices and have StageWebView display my HTML file correctly?
If you're using meta viewport on android make sure to set target-densitydpi value
<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
Or if can using css zoom, where zoom value is related to density-independent pixels (DP) value compare to html page size
Check out this article on Adobe
I was banging my head against the wall with the same problem. On the Xoom (Android 3) the local file displayed perfectly, but on the Nexus (Android 4.2.2), the content wasn't displaying correctly with stagewebview.
My solution was to change the href of the css tag. See here:
How to reference local css files in a static webview window in android dev?.
So in my local HTML file, it changed to:
<link rel="stylesheet" href="file:///styles/style.css" type="text/css" />
We are using Google Maps API to show a large map with plots on it. The map is displayed on the wall using a big TV.
Is there a way I can increase the font size? The TV has lots of pixels per inch so the fonts in the map show very small.
I know there is high dpi images available for Android browser. (the Maps app does not count)
I know that you can double the scale of static maps API images.
I don't know if I can get these high resolution images on an interactive Google Map. Can I do that, or am I just to stick with zoom feature (I don't like the zoom idea because it looks blurry when you zoom in)
I develop a mobile app with html5, jquery and google maps.
When I use normal map (without gmap3) the size of the street names and the overlays are big enough to see from mobile device.
But when i use gmap3 the size of the street names and overlays are really small. is there any settings that i can change from gmap3 to make it suitable for mobile too?
I found the way to do it. In the sample that was working fine there is this line int the head tag:
< meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
With that mobile devices open the map bigger than the PC browsers so that's it.
This is still strange, could you post your 2 codes (with and without) on gmap3 forum please ?
Notice: version 5.0 of gmap3 has been released last week
I created a mobile web site that uses Google Maps. However, the font-size of everything on the map is way too small for a mobile device. Is there any way to increase it?
I already tried using webkit's proprietary text size adjust property and it didn't work:
-webkit-text-size-adjust:200%;
I tried the CSS transform solution (thanks for the idea, Jimmy!) but I ran into a problem. The "transform" doesn't affect the scaling of the touch input. So when you try to zoom or drag the map, you get very disconcerting effects!
I ended up implementing a solution I found here:
http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html
Basically the article explores the difference between physical pixels and CSS "pixels". There is a scale factor between the two. Its default value on most mobile browsers seems to be the reason why you often see pages designed for desktops looking very "zoomed out" with tiny text on a phone. And it also seems to cause unreadable Google Maps!
My problems went away when I added this HTML snippet into my "head" section:
<meta name="viewport" content="width=device-width">
One way to increase the font size is to magnify the div containing the maps. This will result in a somewhat blurry map render, and loss of controls because of the repositioning of the view. Use CSS transform property with a value of scale(2) to zoom 200%. Not a very nice solution, but it's all I can think of.