I'm working on a mobile website with map support.
The roads and font on mobile maps are too small to read. Example
I would like it to show less detail at this zoom level.
Has anyone come across this before?
Thanks,
Casey Forsyth
PS: I have tested this on a HTC Ace and a BB Z10
The Z10 is more readable but would be very hard to read without perfect eye sight.
I managed to solve this problem by shrinking the size of everything else around the map and since the page is scaled to fit the view port it scaled nicely.
Related
I don't often get to work for high resolution displays as most of my clients tend to work with the oldest machines known to man, however I'm currently working on something which will only be displayed on retina display iPads. A graphic has been mocked up of the design they want to the retina resolution (2,048 by 1,536) and I've been building my site based off the dimensions in the graphic. However now I'm actually trying to view it on an iPad, everything is far too big, my '260px header' which I assumed would take up a 6th of the page (ish) is closer to double that.
I don't seem to be able to find anything regarding a workable HTML size for retina displays, only pages talking about how to prep images for retina, what size resolution should I work to when building the HTML?
I believe the best way for you to achieve this is to use CSS where possible and build your site at 1024x768 utilising #2x graphics for retina devices.
A simple guide on utilising these ideas can be found here - http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
So I've just gotten my app to work on IE10/WP8 (demo here), and one thing I've noticed is that both scrolling and transitioning between carousel cards are reasonably sluggish on Windows Phone. Specifically, it takes like half a second for the screen to catch up to my finger. I'd say it's at about 80% of the responsiveness than I get from Android and iPhone, which both have pretty much perfect responsiveness. For reference, here are the devices I'm testing with:
iPhone 4
Android Kyocera Rise
WP8 Nokia Lumia 920
Desktop PC (Windows 8)
So among the phones, my Windows Phone is easily the most powerful, so it likely isn't just a hardware consideration. I've found this sluggishness in fastbook (http://fb.html5isready.com) as well. However, the sluggishness on either app does not exist on my Windows 8 PC.
Is there a particular consideration that needs to be taken with this part of performance in WP8? I've done quite a lot of work optimizing overall performance on the app (destroying/recycling all unused DOM elements, event delegation, etc) and the rest of the app runs quite well. So I'm not sure where I should go from here.
Thanks in advance!
How are you serving those large images? Have you tried using sencha.io to serve them? You can also use the yahoo tool smush.it to crush images further without loss of quality.
Another question: are you using CSS shadows and effects? These can have a noticeable performance hit sometimes...
Also the custom font, how are you implementing that? Google fonts work well, or are you implementing it another way?
:-)
I am a complete novice when it comes to website design, but have the task of designing a website for an academic conference. I wanted to design a functional site to which I understood the code behind it. I have managed to do so, but am now having problems with viewing it on a smartphone. When I have checked the website on online simulators such as brick and mobile is seems to work fine. However, when colleagues of mine with smartphones try looking at it, the main content area will not scroll. Does anyone know of a way to resolve this. The url to the website is:
Conference Website
Edit: The problem appears to be on android phones. If you zoom in a tiny bit you can then scroll alright, and if you move to a portrait view rather than a landscape view it is fine, but it will not scroll on a landscape view on an android.
You might want tot try adding viewport meta to your header, ensuring every device sees your site at the optimal width (this eliminates the user having to zoom in on most mobile devices).
You can find some good information for this in the following article: http://www.html5rocks.com/en/mobile/mobifying/
There are some zooming issues with the website on a Samsung Galaxy S2. This has mostly to do with your menu, which is set to 21%.
Furthermore you're setting height on a lot of elements to 100%. You might want to look into that as well.
I used google maps api v3 to add a map to website. I turned off all the features and did an overlay of the united states. I turned off everything so that it can be zoomed in or panned. It works exactly how we want on the website, but when using and iPhone it can't be scrolled. How do I make it so that it is scrollable on an iPhone.
Thanks
I believe on the iPhone you need to use two fingers to scroll in things like iFrames, or divs with overflow:hidden. Maybe it's the same with your map.
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.