Bad imaging using Google maps on Windows Phone 8.1 - google-maps

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

Related

Screen resolution trouble in different browsers with Aurelia Framework

I'm learning more about Aurelia and while trying to migrate some layouts from HTML5 to Aurelia, I found that everything looks bigger when inside an aurelia template. Even the simplest layout possible, without any css styling or lib, looks bigger here compared with the raw HTML.
My monitor resolution is 1920 x 1080 and looking in Developer Tools, the HTML tag width is smaller (1920px width in HTML file vs 1280px in Aurelia rendered page).
I also tried my app in Google Chrome, Mozilla Firefox and Microsoft Edge and the only showing it how it should on both examples is Edge.
Here is a screenshot of same application on both browsers:
Playing with zoom on developer mode I discovered that if you put zoom: 1.5 on the left one, it gets the same size of the right one and zoom: 0.66 on right get the same of the left.
Does anyone know how to fix this? I'm getting crazy about it!!
Edit:
Here is another example with Chrome and Firefox. Attention to the sizes:
No css at all on these examples!
Since I didn't find why it was happening, I reinstalled my browsers and the problem is gone! I failed figuring out the reason it was happening but for now, that's enough for me.

Does Windows 8.1 Tablet support large tiles for a website?

I am working on a project in which it is required to add capabilities to a website by which a user can pin the site to the start screen of Windows 8.1.
This can be done by adding some "meta" tags in the head section of the HTML page.
I just have one question whether large tiles are supported on Windows 8.1 Tablet or not.
It is stated here that large tiles are not supported on Windows Phone. Does this mean that large tiles are supported on Windows 8.1 Tablet or not?
Yes you can have live tiles for your website and they will work on windows phone. Scott Hanselman wrote a nice blogpost on how this can be achieved.
Update:
Yes large tiles are supported on Windows 8.1 i.e. a tablet. You can see it when you pin hanselmans or my blog to the start menu.

Weird horizontal panning with IE 10 mobile?

I have made a collaborative writing website called Fablelane (https://www.fablelane.com).
It runs with a somewhat responsive layout (except it looks bad in mobile, but that is what I am working on). Now, if I visit the site in IE 10 mobile from my Nokia Lumia 920, I can pan about 20 pixels to the right.
I am pretty sure that I don't have any weird paddings anywhere and anything that creates unnecessary spacing. I also have the view port meta tag set correctly, and I have made everything box sized.
What am I doing wrong? The issue is hard to pinpoint for me since I don't have access to other smartphones than Windows Phones, and because it's not within my budget to buy things like BrowserStack. I haven't had luck setting up the local emulator to find my ASP .NET MVC localhost site either.
Can anyone help?
Perhaps there is an overflow issue. Maybe try popping:
overflow:hidden;
into your css to see if that makes a difference or not.

iOS Safari and PhoneGap app crashes if the content is larger than 4000-5000 px

I'm developing a PhoneGap application. In iOS 5.1.1 there was no problem but in 6.1.3 there is a scrolling issue.
If I use a container with overflow:auto; -webkit-overflow-scrolling:touch; and the content is larger than 4000-5000 px, Safari crashes after scrolling.
You can test it with the link below. Click the map and scroll it after zooming in 4-5 times.
http://okngnr.com/arb/
I know the problem is not SVG or too many DOM elements. Is there a bug in iOS 6.x? How can I see the crash report of Safari? I'm using Windows and these isn't CrashReporter under \Users\<username>\AppData\Roaming\Apple Computer\Logs\
Thanks in advance.
Maybe an iOS issue. Did you test on iOS 7 (for having an idea) ? On Mac, using Xcode Phonegap project and the debugger, you might have more informations. Maybe the problem comes when you load in one time all the content.
If you paginate ? Four by four with a button in the bottom to load others. It's not cool for your interface but if it's an iOS issue, you may not have the choice...

gmap3 is too small while opened from mobile device

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