如何针对Androidstock/native浏览器进行调整CSS

Question

我尝试了这个论坛的一些建议，none 对我有用：

我正在尝试使用可以识别 Android 库存浏览器的脚本，这样我就可以增加所选文本区域的字体大小。

我试过以下脚本

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));

和

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));

从这里开始：Javascript detect android native browser

和

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;

}

从这里开始：http://danecando.com/detecting-androids-native-browser-javascript/

而且我已经使用此处的建议尝试了 Modernizer：http://codepen.io/anon/pen/KwLmeZ （我使用了完整的开发者代码 js "addTest"）

没有任何效果。

我尝试使用 codepen idea 的方法来更改 CSS class 以及这两种格式中的任何一种，但均未成功： $("paratext").css("fontSize", "150%"); $('.paratext').css("font-size", "150%");

谁能告诉我 a) 识别常用浏览器和 b) 更改 class "paratext" 字体大小所需的完整编码？

我需要被灌输完整的代码，因为我认为那是我要失败的地方。

我尝试用 $(文档).ready(函数() {

或者 $(函数() {

如果上述想法可行，仍然没有得到任何结果。

如有任何帮助，我们将不胜感激！

我最后尝试使用的是上面 codepen 中显示的想法：

在我调用modernizr.js（开发版）和调用的部分中。

我知道了： Modernizr.addTest('androidStock',函数(){ 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; });

这是我对 codepen 的 CSS 的编辑： .androidstock{ .paratext{ 字体大小：150%； } /* 。消极的{ 显示：none； }*/ }

Answer 1

针对我的问题，我找到了一个不需要针对浏览器的好解决方案：我偶然发现了一个有趣的现象，即如果我将我的文本放在 html [=48= 的列中], 文本突然在 Android stock 和 Chrome 浏览器上呈现良好。

再检查一下，我在这个帖子 Android browsers and columns

中发现了 post

这表明 Android 确实存在渲染问题，即在列中显示比在单列格式中显示效果更好。

所以在我的问题的上下文中，使用 Joomla 自定义 html 模块，我这样做了（使用 device.js javascript）： a) 在一个模块中，我创建了相同文本的两个版本 - 一个以标准方式用于非 Android 设备，一个用于 Android 设备，文本分为两列（由间隔列分隔） ) 在 table 中（尝试放置一个间隔列 - 文本列 - 间隔列不起作用，并且 Android 以通常的方式恢复呈现文本） b) 使用我在条件css中添加的'sourcerer'插件显示或不显示每个版本，取决于device.js脚本识别的操作系统，像这样：

<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 和 yesandroid 作为 div 类来控制 2 个不同的显示，paratext 用于 table 之外的任何特殊文本，contable 控制 table 本身内的文本大小。使用该方法的功劳来自本例中的 css：codepen Android broweser detector

我确实尝试使用 MetaModPro 使用其内置设备检测器来做类似的事情，但它不如 device.js 准确（它没有 'see' 我的 LG v400 作为 Android 设备并显示而不是默认显示）。它还需要创建 2 个单独的模块（对于 Android/non-Android），而不是仅仅从一个模块调用所有内容。

这是一个需要解决的大问题（在我看来）。欢迎有好奇心的人点击顶部蓝色导航栏上的菜单选项，在此处查看实时示例（并在不同设备上查看）：historama.com

如何针对Androidstock/native浏览器进行调整CSS

How to target Android stock/native browser to adjust CSS

javascript

css

browser

jquery-selectors