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
Related
I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
I have an iOS app that basically shows the website inside a webview. On the iPhone 6/6+, the text is blurry when viewed in the app, but looks great when viewed as a regular webpage in Safari. Everything is basically the same in the app and website: same CSS rules, etc., and:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have seen this How to fix blurred text on an iPhone 6 (+), but there's just a comment saying to "add native support." Another answer mentioned to add a new launch image. Is that going to fix blurry text? I'm also not sure where this would be added.
It would be a huge plus if this can be fixed in the HTMl/JS/CSS as opposed to making an update to the native wrapper.
If your app isn't built to support the iPhone 6/6 Plus, then it will emulate an iPhone 5, and just scale things up.
So, yes, you should build an submit a new version of the app, built against the latest iOS SDK, with a launch screen.
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 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>
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.