【问题标题】:How to target Android stock/native browser to adjust CSS如何针对 Android 股票/原生浏览器调整 CSS
【发布时间】:2015-04-15 17:30:28
【问题描述】:

我尝试了这个论坛的几个建议,但没有一个对我有用:

我正在尝试使用可以识别 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 类以及这两种格式中的任何一种,但均未成功: $("paratext").css("fontSize", "150%"); $('.paratext').css("font-size", "150%");

谁能告诉我a)识别股票浏览器和b)更改类“paratext”字体大小所需的完整编码?

我需要完整的代码,因为我认为那是我失败的地方。

我尝试使用 $(document).ready(function() {

或者 $(函数() {

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

任何帮助将不胜感激!

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

在我调用modernizr.js(开发版本)和调用的部分中。

我有这个: 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( '铬') > -1)); 返回is_android; });

如果 codepen 的 CSS,这是我的编辑: .androidstock{ .paratext{ 字体大小:150%; } /* 。消极的{ 显示:无; }*/ }

【问题讨论】:

  • 你在什么设备上测试这个
  • Sony experia t26i(如果我没记错的话)和 LG v400 平板电脑。我做了 CSS 更改,在普通浏览器上呈现良好,但在 Android Chrome 上看起来很糟糕,我更愿意让 Chrome 保持原样,只为普通浏览器找到一个特定的修复...
  • 一般来说,您希望尝试获得适用于两种浏览器的解决方案,而不是基于用户代理的分段。问题是什么?如果你不得不,你试过stackoverflow.com/a/24935123/960588
  • 我的问题是股票浏览器呈现的字体大小比 Chrome 小得多。我需要将其从默认大小增加 150%,以便渲染良好。
  • ...为我的问题添加一些上下文:我正在处理网站上的 Joomla 子目录。它在 Android 上渲染得很好,除非我使用嵌入在页面上的自定义 HTML“模块”。在这种情况下,Chrome 接受现有的字体大小,但普通浏览器需要向上调整...

标签: javascript css browser jquery-selectors


【解决方案1】:

在我的问题的上下文中,我找到了一个不需要定位浏览器的好解决方案:我偶然发现了一个有趣的现象,即如果我将文本放在 html 表格的列中,文本突然在两个 Android 上都能很好地呈现股票和 Chrome 浏览器。

再检查一下我在这个线程Android browsers and columns中看到了这个帖子

这表明 Android 确实存在渲染问题,即按列显示比单列格式更好。

所以在我的问题的上下文中,使用 Joomla 自定义 html 模块,我这样做了(使用 device.js javascript): a)在一个模块中,我创建了相同文本的 2 个版本 - 一个以标准方式用于非 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 和 yesandroid 作为 div 类来控制 2 个不同的显示中的每一个,paratext 用于表格之外的任何特殊文本,而 contable 控制表格本身内部的文本大小。使用该方法的功劳来自此示例中的 css:codepen Android broweser detector

我确实尝试过 MetaModPro 使用其内置的设备检测器来做类似的事情,但它不如 device.js 准确(它没有“看到”我的 LG v400 作为 Android 设备,而是显示默认值展示)。它还需要创建 2 个单独的模块(适用于 Android/非 Android),而不是仅仅从一个模块调用所有内容。

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

【讨论】:

    猜你喜欢
    • 2014-02-16
    • 2015-05-07
    • 2013-05-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-13
    • 1970-01-01
    • 2014-10-18
    相关资源
    最近更新 更多