I have a Windows Phone (a Nokia Lumia) from which I recently encountered an issue. I can't zoom (pinch zoom) or navigate (scrolling with the finger) using Google Maps. It was possible I believe last week or the week before that, but now it's not working anymore.
I can't recall any updates issued in between last working date and now, nor have I fiddled with any options.
I saw in a thread that one could use the options in the browser in order to enable zooming. But this option is not present for me. I use Internet Explorer.
Based from this thread, if it was determined that you are on a desktop version or IE, it will allow zooming to be controlled by mouse. Touch won't work at all. I also found this blog which states that:
The mobile Web version of Google Maps is optimized for WebKit browsers such as Chrome and Safari. However, since Internet Explorer is not a WebKit browser, Windows Phone devices are not able to access Google Maps for the mobile Web.
The desktop version of Google Maps works just fine in these browsers. It's one thing for Google to say the mobile site isn't tested or supported in the mobile browsers, but the desktop version, at least, shouldn't be off-limits. The desktop version may not be ideal in a mobile browser, but it does work.
Related
we have been developping a mobile application using HTML/CSS/Js. Because this was developped mostly in the Device Toolbar of chrome, it does not look good when not used in a mobile browser. Unfortunately, when I build the Project to an Android APK using Cordova it does not look like it would on a mobile browser (Firefox, Samsung Internet, etc.)
First Image was taken in firefox, the second in the Cordova Application.
Is there any way to make Cordova behave like a Mobile Browser would?
If it isn't possible to make Cordova behave like a Mobile Browser can you emulate this using css or javascript?
I have heard about and tried the zoom css tag, which in my case helped on a handful of pages, though a few other pages, which work perfectly on the Mobile Browser, didn't look good at all using zoom.
This answer assumes you've tried the <meta name="viewport" content="width=device-width, initial-scale=1"> meta tag as suggested in a comment.
Cordova uses the systems' webview. It does not have it's own webview implementation. Therefore Cordova is already using a "mobile browser" engine. But the mobile engine being used might not be of the same version as the installable browser version.
As long as you're using Android 4.4+, the system webview is a chrome-based webview and as of Android 5.0, the webview is upgradable by the use through Google Play updates. It's worth mentioning that the latest cordova versions only support Android 5.1+.
When you setup a new emulator, it will have the factory versions installed by default, which can sometimes be a really old version of the webview. If you installed a Google Play enabled emulator (the emulator image is marked as a Google Play image), you can sign into Google Play and update the device which will include the system webview updates. Older devices may still have the webview version limited. For example, I believe android 5 can only get up to System webview Chrome 70 if I recall correctly.
Using a google play enabled emulator and updating the emulator device via Google Play may fix your issue, but it also suggests that your HTML/CSS document isn't backwards compatible to older webviews versions. Perhaps your document is using CSS features that only exists in newer webview versions.
I tried using href="tel:911" this works perfectly fine with mobile phone and I tried using windows 10 with google chrome, it works! But with windows 7, using google chrome with the updated version the code doesn't work.
this is browser settings specific, ie. it will behave differently depending on the user's browser settings. The user can change how mailto: or tel: links behave in chrome by visiting chrome://settings/handlers, or Chrome Settings->Content Settings->Manage Handlers...
check chrome docs: https://developers.google.com/web/fundamentals/native-hardware/click-to-call/
I have an AngularJS (1.58) webapp showing some maps with ui-leaflet.
I have integrated the Leaflet.Heat Plugin, successfully. Also, I have integrated the Leaflet.Draw Plugin successfully.
Problem:
The moment Im using both Plugin, Heat and Draw, my webapp is not showing any maps anymore on microsoft browsers (Microsoft Edge, Internet Explorer 11). I have tried to use different combinations of release versions of these plugins to get it to work on every of the common browers. When I bring the leaflet maps back to working on Microsoft Edge, the Heat Plugin is not anymore working (not only ME, also not Opera, Firefox, GChrome).
Summed up:
The latest versions of ui-leaflet, Leaflet, ui-leaflet-draw and Leaflet.Heat
are working fine together on Google Chrome, Firefox, Opera. But the maps are totally disappearing for Microsoft Edge. Older versions are showing maps again for Microsoft Edge, but the Heat Plugin is not anymore working on any browser.
Question: Is there a working combination of versions of these tools for all these browsers (speaking of Google Chrome, Firefox, Opera, Microsoft Edge) together? If so, which versions are them? If not, are there recommended workarounds? Maybe other plugins, which I can use instead for drawing or showing well-looking heatmaps?
Steps to reproduce:
Download the Leaflet.Heat example. Integrate ui-leaflet-draw as Librarys (e.g. via bower).
Test it with Google Chrome, Firefox, or Opera. Depending on your versions, you gonna either see the working Heatmap but tested with Microsoft Edge you dont see any map OR you dont see any heatmap, and microsoft edge shows u a map (also without heat).
Alright, I was focusing my issue and find a solution.
I replaced ui-leaflet-draw with leaflet.Draw plugin and the combination of all 3 worked for all browsers (as long as I am using the correct versions).
So here they are from my bower.json project file:
"dependencies": {
"angular": "1.5.8",
"angular-simple-logger": "~0.1.7",
"ui-leaflet": "1.0.3",
"Leaflet.heat": "https://github.com/Leaflet/Leaflet.heat/archive/gh-pages.tar.gz",
"angular-material": "~1.1.1",
"leaflet.draw": "*"
},
"resolutions": {
"angular-material": "~1.1.1",
"angular": "1.5.8",
"leaflet": "1.0.3"
}
Update: Leaflet 1.0.3 working too and has better user expierence controls then 0.7.x
Enjoy developing nice maps with Heat layers and Draw controls now working for GChrome, Opera, FireFox, and Microsoft Edge! (havent tested IE 11 cuz of lots of other conflicts with angular-material)
I have a website that uses (except for other things) AngularJS. This website works perfectly fine on (example):
Google Chrome
IE
Firefox
iOS
Android
However I am having problems with Windows 10 mobile as one of the features is not working correctly (to be more precise it is $interval).
When testing my app on one of the browsers I view website via Web Inspector and go to background code to inspect where exactly the app fails. However I have no idea how to fix the problems that occur on mobile devices - such as Windows 10 Mobile?
How can one debug websites on a mobile device?
Windows 10 Mobile has Edge Browser. Try debugging it in that.
This is might be helpful.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
for the debugging tool you can use
https://msdn.microsoft.com/library/dn255001(v=vs.85).aspx
So added gears functionality into my Mobi Engine, but there is a wierd behavior when viewing the site in Chrome. The HTML gets shifted down by about 15px. All other browsers tested so far does not show the same problem. Also doesn't seem to affect any mobile browsers.
Check here for the symptom. http://cibr8.itell.mobi
I only need gears to post back the user's location (if allowed by the user).
I don't know what is causing this, but you could drop Gears for the Chrome browser. What Gears used to provide (location & local storage) is now part of HTML 5. Google have "end of life'd" Gears. Chrome supports HTML5 (up to date versions anyway)
http://gearsblog.blogspot.com/2010/02/hello-html5.html