HTML 选择下拉菜单在 android webview 中不起作用

问题描述 投票：0回答：2

浏览器用户代理版本：

"Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5"

基本 HTML 代码 

<!DOCTYPE html>
<html>
    <head>
        <title>Test Pages</title>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    </head>
    <body>
        <div>
            <select>
                <option>One</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
                <option>five</option>
            </select>
        </div>
    </body>
</html>

这似乎适用于 UIWebView(iPhone) 和本机浏览器。只有 android webView 存在问题。任何帮助将不胜感激。webview 是一个 cordova 活动

android html webview html-select
2个回答
0
投票

来自这里

的@mattstow的回答

Android 浏览器对 

<select>
的渲染存在错误，如果应用背景或边框，将会删除正常样式。

由于 

<select>
看起来不像 
<select>
s 是一个相当大的可用性问题，所以最好的选择是不要仅针对此浏览器设置它们的样式。

不幸的是，没有纯CSS方法来选择/排除Android浏览器，所以我建议你使用布局引擎（https://github.com/stowball/Layout-Engine），它将添加一个.browser-类android 到 

<html>
标签。

然后，您可以设置除 Android 浏览器之外的所有 

<select>
的样式，如下所示：

html:not(.browser-android) select {
    background: #0f0;
    border: 1px solid #ff0;
}
0
投票

您在 Cordova 活动中的 Android WebView 中遇到的元素问题可能与 Android WebView 处理表单元素（例如 .以下是解决此问题的一些潜在解决方案：

更新 Cordova 和 WebView：确保您使用的是最新版本的 Cordova 并且您的 Android WebView 是最新的。有时，更新 Cordova 或 WebView 组件可以解决兼容性问题。

检查CSS样式：表单元素的渲染可能会受到CSS样式的影响。确保不存在可能导致问题的冲突或自定义样式。您可以尝试删除或修改影响元素的任何自定义 CSS。

JavaScript 事件处理：如果您有与元素交互的 JavaScript 代码，请确保编写的代码与 iOS 和 Android WebView 兼容。不同的平台可能对某些 JavaScript 函数或事件有不同程度的支持。

视口配置：HTML 代码中的标签指定视口属性。确保设置的属性适合 Android WebView。您可能需要调整用户可缩放和初始缩放属性以适应 WebView 的行为。 enter image description here

在此代码中：

我们扩展了 CordovaActivity 类来创建您的 Cordova 活动。

我们使用 appView.getEngine().getView() 从 Cordova 活动中检索 WebView。

我们配置各种 WebView 设置，例如启用 JavaScript、启用 DOM 存储以及调整视口设置以适应内容宽度而不允许缩放。

请将 YourCordovaActivity 替换为您的 Cordova 活动的实际名称，并确保将此代码添加到您设置 Cordova WebView 的 Android 项目中。

请记住在各种 Android 设备和版本上彻底测试您的应用程序，以确保元素渲染问题按预期得到解决。此外，您可能需要根据您的特定应用程序的要求以及您拥有的任何其他依赖项进行进一步的调整。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.