How to target Android stock/native browser to adjust CSS


Tags: javascript,css,browser,jquery-selectors

Problem :

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; }*/ }



Solution :

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


    CSS Howto..

    CSS HTML How to align image within div to bottom right

    How do I center all my elements?

    How to add an url to image by css?

    How to think to get all content inline (HTML & CSS)

    how to load the dynamically changed css file

    How to apply an image to a CSS ordered list in WordPress?

    How do I keep dropdown menus the same width of top level categories with auto width

    How to change a lot of img when hover

    CSS/XHTML: Show div after a specific count of table rows

    how to translate this xpath into css selector

    How to iterate over node var in Primefaces tree to set icons in CSS class from DB

    How to vertically center text span in fixed position div?

    How can I add image to facebook login button?

    How to make the opacity layer same size as img

    how can I overcome existing css and change button style to the default windows style button?

    How do I move this label inside my textarea?

    How to align navigation links after navigation menu is collapsed using bootstrap

    CSS: How to prevent div from overlapping parent height or parent border

    how to call all Google font CSS under specific font face

    How to stick a background behind the navbar?

    CSS: How to fit a circular progress bar according to screen size (mobile)

    How to use pure CSS to control other elements under same parent?

    How can I absolutely position a related image_tag?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    Show window inside any web page

    How to get access to file css in JSF 2.0

    cannot figure out how to make text appear inside div after hover animation

    How to inherit height in div?

    How can I group DIVs in my document so I can apply CSS to them?

    css how to make H2 tag look same as H3 tag (turned out hard!)