0

I've tried several suggestions from this forum and none have worked for me:

I'm trying to use a script which can identify the Android stock browser so I can increase the font size on a selected area of text.

I've tried the following scripts 

var nua = navigator.userAgent;
var is_android =      ((nua.indexOf('Mozilla/5.0') > -1 &&     nua.indexOf('Android ') > -1 &&     nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));

And 

var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 &&     nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));

From here: Javascript detect android native browser

And

function isAndroidBrowser() {
var objAgent = navigator.userAgent;
var objfullVersion  = ''+parseFloat(navigator.appVersion);

if ((objOffsetVersion=objAgent.indexOf("Chrome")) != -1) {
    objfullVersion = objAgent.substring(objOffsetVersion+7, objOffsetVersion+9);
    if (objfullVersion < 19) {
        return true;
    }
}

return false;

}

From here: http://danecando.com/detecting-androids-native-browser-javascript/

And I've tried Modernizer using the suggestion here: http://codepen.io/anon/pen/KwLmeZ (I used the full developer code js with "addTest")

Nothing has worked.

I've tried using the codepen idea's method for changing a CSS class as well as either of these 2 formats without success: $("paratext").css("fontSize", "150%"); $('.paratext').css("font-size", "150%");

Can anyone show me the full coding needed to a) identify the stock browser and b) to change the class "paratext" font size?

I need to be spoonfed the full code because I think that's where I'm falling.

I tried starting the scripts with $(document).ready(function() {

Or $(function() {

And still didn't get any if the ideas above to work.

Any help would be greatly appreciated!

What I've tried to use last was the idea displayed at codepen above:

In the section I called up modernizr.js (development version) and the callup.

I've got this: Modernizr.addTest('androidStock', function () { var nua = navigator.userAgent; var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1)); return is_android; });

And this is my edit if codepen's CSS: .androidstock{ .paratext{ font-size: 150%; } /* .negative{ display: none; }*/ }

Community
  • 1
  • 1
sunset_diver
  • 1
  • 5
  • what devices are you testing this on – Patrick Apr 07 '15 at 16:36
  • Sony experia t26i (if I'm not mistaken) and LG v400 tablet. I made CSS changes that render well on the stock browser but look bad on Android Chrome, and I preferred to leave Chrome as it was and just find a specific fix for the stock browser... – sunset_diver Apr 07 '15 at 17:15
  • in general you want to try to get a solution that works in both browsers, rather than segment based on user agent. What is the issue? If you _had_ to, did you try http://stackoverflow.com/a/24935123/960588 – Patrick Apr 08 '15 at 03:20
  • My problem is that the stock browser renders the font size much smaller than Chrome. I need to increase it by 150% from the default size so it renders well. – sunset_diver Apr 08 '15 at 08:58
  • ...to add some context to my problem: I'm working on a Joomla sub directory on a site. It renders fine on Android except in cases where I use a custom HTML "module" implanted on a page. There, in such cases, Chrome accepts the existing font size but the stock browser requires an upward adjustment... – sunset_diver Apr 08 '15 at 09:26
  • set meta device width - https://css-tricks.com/probably-use-initial-scale1/ – Patrick Apr 08 '15 at 19:45
  • Is that a callup I add to the head section regardless of the browser/device? – sunset_diver Apr 09 '15 at 10:35
  • ...more specifically, can I add a viewport callup into the custom HTML module itself? – sunset_diver Apr 09 '15 at 12:54
  • the metatag must be in the head – Patrick Apr 09 '15 at 16:47

1 Answers1

0

In the context of my problem, I found a good solution that doesn't require targeting browsers: I stumbled upon an interesting phenomenon whereby if I put my text in columns in an html table, the text suddenly rendered well on both Android stock and Chrome browsers.

Checking this a bit more I came across the post in this thread Android browsers and columns

which indicated that Android indeed has a rendering issue whereby displays in columns render better than in a single column format.

So in the context of my problem, using Joomla custom html modules, I did this (using the device.js javascript): a) in a single module I created 2 versions of the same text - one for non-Android devices in a standard manner and one for Android devices, with text in two columns (separated by a spacer column) within a table (trying to put a spacer column - text column - spacer column didn't work, and Android resumed rendering the text in its usual manner) b) using the 'sourcerer' plugin I added in condition css to display or not display each version, depending on the operating system identified by the device.js script, like this:

<style type="text/css">
.desktop .nonandroid, .ios .nonandroid, .blackberry .nonandroid, .windows .nonandroid, .fxos .nonandroid, .meego .nonandroid, .television .nonandroid     {display:block;}
.android .nonandroid {display:none;} 
.desktop .yesandroid, .ios .yesandroid, .blackberry .yesandroid, .windows    .yesandroid, .fxos .yesandroid, .meego .yesandroid, .television .yesandroid   {display:none;}
.android .yesandroid {display:block;}
.android .mobile .yesandroid .paratext {font-size:18px;}
.android .tablet .yesandroid .paratext {font-size:12px;}
.android. .yesandroid contable, .android .yesandroid .contable td{font-size:130%;}
</style>

nonandroid and yesandroid serve as div classes to control each of the 2 different displays, paratext is for any special text outside of the table, and contable controls the text size inside the table itself. Credit for using that approach come from the css in this example: codepen Android broweser detector

I did try MetaModPro to do something similar using its built-in device detector, but it wasn't as accurate as device.js (it didn't 'see' my LG v400 as an Android device and displayed instead the default display). It would also have required creating 2 separate modules (for Android/non-Android) instead of just calling everything up from one single module.

This was an enormous problem to solve (in my opinion). The curious are welcome to see a live example (and view it on different devices) here, by clicking on the menu options on the top blue nav-bar: historama.com

Community
  • 1
  • 1
sunset_diver
  • 1
  • 5