Sizing Text for SmartPhones that Have Text Zoom Enabled - android

I don't know if this applies to Android or iPhone. I have an Android 2.3.3 for testing and an iPod Touch 3rd generation with iOS 5 on the way. But I know its a problem on my buddy's new Blackberry.
Basically, my buddy has text zoom (or whatever you call it) turned on so that text is displayed at like 150% of its normal size on any web pages he views on his Blackberry. Well, I have optimized my sites with media queries so the text already increases to 150% on small screens. On his device, the device setting is compounded with my CSS settings and the text becomes absolutely enormous!
I'm sure this is a problem for a lot of users since there are so many sites out there with tiny text that has to be zoomed for mobile.
So my question is: Is there some kind of best practice approach or any solution to dealing with these folks that have turned on text-zoom or an equivalent feature? How can I make my text not be obscenely large and unuseable for them? Do I just leave it in their hands to turn the text zoom down?
Also, does Android 2.3 have some kind of feature like this that I should be testing for?
Thanks ahead.

I don't think there is a solution to cases where users have increased their text size. If someone knows of one, please indicate so. In the meantime, I DID find out that you can make device-specific adjustments for mobile devices with these:
-moz-text-size-adjust
-webkit-text-size-adjust
-ms-text-size-adjust
Details can be found here:
https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
I'm going to mark the question as answered since I don't believe a solution to the original issue actually exists at this time.

Related

Text View is flashing/blinking in my application

We're developing a custom Android application built for a specific Android -- formerly the Samsung Galaxy Tab 2 -- and I was pretty happy with the way it looked.
However, we've changed phones to the Nexus 7, and now a Text View that used to look fine blinks rapidly -- it's seizure inducing. My application updates the text a few times a second, but that's not new and we never had this problem with the Samsung.
Has anybody experienced something similar, or otherwise have a suggestion?? My original suspicion that the Samsung had more processor power is, I'm pretty sure, incorrect. Should I look into some of the Nexus' configuration details concerning rendering the GPU??
It's going to be annoying if have to get rid of this software feature, but I might have to if I can't improve the look.
It's not a great answer, but it does work for me if I set up my code to only update the text view every other trip through the draw loop. If anyone else has a different suggestion I'd certainly prefer to try something else, but this at least works.

Why is this android device enlarging text?

The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.

Best way to test Android layout before submitting to market

reading about all these different resolutions and hardwares for Android I am a little unsure if the layout I created for an Samsung Galaxy will actually work the same way on all (most) Android devices.
I did not use anything fancy or complicated. However I had to use fixed width in several places to align text and buttons nicely. ALso there is some text with linebreaks that could look differntly if on narrower screens
How can I be sure that my layout will work on other devices? Or is this actually a no issue? Testing in the debugger is sooooo slow, that I actually never got it to work properly.
Thanks very much!
You can set up multiple emulators with different screen sizes, that simulate the possible targets.
In the emulator Ctrl-F11/12 (thanks #ccheneson) allows you to change the orientation, so that you can test that as well.
The emulator may be slow, but to see how the layouts look like it should be fast enough - you may still test the logic on a real device.
Also emulator speed seems to be highly dependent on the screen size.

make a website compatible with android

How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.

How to determine if an Android device has a touchscreen?

I'm spending considerable time in making my UI to work with keyboard input only. But in the end I'm not sure whether I can rely on the assumption that Android devices all have touch screens.
Is there a way to determine if an Android device has a touch screen?
You should research the existing devices and read the Android Compatibility Definition Document (CDD) and decide for yourself.
I have spent some considerable time trying to figure out this problem for myself. The posters above are correct that Android already powers some non-touch devices and will power Google TV in the near future, but as it currently stands, the CDD specifically requires that ALL Android devices MUST have a touchscreen.
Basically, the Android Compatibility program was created to hedge against the sort of fragmentation issues you're worrying about now. It lists a bunch of requirements, and if a device does not meet those requirements, it does not get access to Android Market. These requirements include a touchscreen, wireless communication, bluetooth, a camera, and much more.
If you research those tablets and netbooks, you will find that not a single one carries the Android Market. Augen recently tried to pull a fast one with their new GENTOUCH 78 tablet, but had to rescind their claims that the tablet would carry Android Market after being shot down by the Android Compatibility Team.
So, if you are only distributing your app through Android Market, you have nothing to worry about until Google changes the CDD. But if you'd like to offer your app on other app stores or as a direct download, then you'll have to worry about your key mode navigation issues.
If it's any consolation, I have found that many, many apps have the exact same problem; they are impossible to use without a touchscreen. Many of them also have serious issues with focus and the soft keyboard. Sometimes the keyboard stays up when it should be hidden. Sometimes you can't get the keyboard to pop up no matter how many times you click on an EditText. IMO, the Android framework does not handle these things all that well.
Given all that, it will certainly be interesting to see how Google TV fits into all this. Will they update the CDD to be compatible with their set-top boxes? Will they use a different SDK and CDD for Google TV implementations? Will they ignore the Compatibility Program altogether when it comes to Google TV? Your guess is as good as mine.
Update:
It seems that someone at Google has finally come forward and admitted that Android is not ready to run on a tablet:
http://phandroid.com/2010/09/10/shocker-google-says-android-not-meant-for-tablets-in-its-current-state/
To me, this says that Google was not prepared for the accelerated adoption of the Android OS and has not adequately roadmapped the future of the platform. Supporting screens larger than 480x800 is barely possible, and Samsung was only able to do it by working closely with Google on the Galaxy Tab. So I'm not so sure we need to worry about non-touchscreen devices in the near future. They'll be here eventually, I'm sure, but when they do arrive we may see a separate app market just for those, or some altered filtering scheme on the existing market, a new CDD, who knows.
To me, this says that Google is still playing it by ear, and we'll just have to do the same.
All the phones so far have touch screens, but there is no promise that they must.
However there are lots of netbooks, notebooks, and soon to be TVs that have no touch screen.
However these devices have mice. From what I've seen, the mouse input gets pumped through the touch system so MouseDown is ACTION_DOWN, etc... (Don't know about right click though)
Are you targetting just the phones? Android is appearing on many devices including TV's I've no idea if new libs will be released to isolate parts of the devices from each other, but if you want a broader audience I'd suggest keeping the keyboard input available if you are
Google TV (GTV) is the most popular Android notouch device (as of the time this answer is composed). However, there are several devices that will call for notouch renderings if you have "notouch" resources (e.g. a directory like res/layout-notouch/ )
To accommodate notouch devices, made sure that focus will cause a visual selection indicator, and (for GTV) that keystroke listeners are in place for the directional-pad center button. Using default widgets and themes will often accomplish much of this automatically. If you make your own buttons, you need background 9-patches for focused and focused+pressed.
Running on a GTV is a good test environment to make sure that notouch works well, and GTV has an emulator now, though it runs only on Linux/x86.

Categories

Resources