如何针对Android股票/本地浏览器来调整CSS

How to target Android stock/native browser to adjust CSS

本文关键字：浏览器 调整 CSS 何针 Android 股票      更新时间：2023-09-26

我尝试了这个论坛的几个建议，但都没有对我有效：

我正在尝试使用一个可以识别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检测android原生浏览器

和

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思想的方法来更改CSS类以及这两种格式中的任何一种，但都没有成功：$（"paratext"）.css（"fontSize"，"150%"）；$（'.paratext'）.css（"font-size"，"150%"）；

有人能向我展示a）识别股票浏览器和b）更改类"paratext"字体大小所需的完整编码吗？

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

我试着用$（document）.ready（function）｛

或者$（function（）｛

但仍然没有得到任何上述想法的作用。

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

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

在本节中，我调用了modernizr.js（开发版本）和callup。

我得到了这个：Modernizr.addTest（"droidStock"，函数（）{var nua=navigator.userAgent；var is_android=（（nua.indexOf（'Mozilla/5.0'）>-1&amp；nua.indexOf（'Android'）>-1&amp；nua.indexOf（'AppleWebKit’）>-1）&amp！（nua.indexOf（'Chrome'）>-1））；返回is_android；})；

如果codepen的CSS：.androidstock{.paratext{字体大小：150%；}/*.负极{显示：无；}*/}

在我的问题中，我找到了一个不需要针对浏览器的好解决方案：我偶然发现了一个有趣的现象，如果我把文本放在html表中的列中，文本突然在Android股票和Chrome浏览器上都能很好地呈现。

我在这个帖子中看到了安卓浏览器和列

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

因此，在我的问题背景下，使用Joomla自定义html模块，我这样做了（使用device.js javascript）：a） 在一个模块中，我创建了两个版本的相同文本-一个以标准方式用于非Android设备，另一个用于Android设备，文本在一个表中分为两列（用间隔列分隔）（试图放置间隔列-文本列-间隔列不起作用，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和yessandroid充当div类来控制两个不同显示中的每一个，paratext用于表外的任何特殊文本，而contable控制表内的文本大小。使用这种方法的功劳来自本例中的css：codepen Android浏览器检测器

我确实尝试过MetaModPro使用其内置的设备检测器进行类似的操作，但它不如device.js准确（它没有将我的LG v400"视为"安卓设备，而是显示默认显示器）。它还需要创建两个独立的模块（适用于安卓系统/非安卓系统），而不是只从一个模块调用所有模块。

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

相关文章：