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..

    How to make this CSS to be in the middle?

    How to apply a CSS class to a SVG Text element

    How to dynamically add .css to a custom Javafx LineChart Node?

    How do i make li active in angularJS?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    960 grid css : How do I change vertical padding between divs?

    How to slice an Image Border for use in CSS?

    How to get text in css to appear in the vertical middle

    How to write css rule with variable to change font-size?

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How do I solve this IE7 margin issue?

    How to make the header part of the site as low as the logo?

    How do I let a div fill in the blank space

    How to create a level 4 submenu with this css?

    How to create a fluidic list using css

    How do I set the background-image property to a linear gradient using jQuery's css method?

    How to wait for resources to be loaded

    How to replace default html checkbox with just html+css and no images?

    How to target Microsoft Edge with CSS? [duplicate]

    How to change css file of bx-slider, multiple sliders on a page [closed]

    How to make a background color stretch to left and right of viewport in Safari Browsers

    How to create circles around a circle with css, javascript?

    How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

    How to echo individual css classes for li's?

    how to position an “Insert row” button in front of each horizontal row border of a table?

    How to call a function for each element with a particular class, every time the window scrolls (jquery))

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How to add html and css in public function? [closed]

    How to animate an unknown number of items in sequence using css animations?

    show play icon on image hover