Webview中的Html按钮宽度百分比答案

【问题标题】：Html button width in percent in WebviewWebview中的Html按钮宽度百分比
【发布时间】：2012-07-20 19:56:04
【问题描述】：

我有一些 html 代码并将其加载到 WebView。我需要以百分比设置按钮宽度（为了不依赖于屏幕分辨率）。

当我以百分比设置按钮的宽度时，我收到了一个错误，page cannot be loaded 但我以像素为单位设置它一切正常。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type='text/css'> 
            body{ position: relative; } 
            button { width: 50%; display: block; position: relative;  } 
        </style>
    </head>
    <body style='text-align:justify;color:white;'>
        Some text
        <br/>
        <button>Boo!</button>
    </body>
</html>

有什么想法吗？

编辑：

根据@Zak的建议找到了解决方案，即在页面加载完毕后调用js函数，获取屏幕宽度并设置给元素。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language='javascript'> function SetWidth(){  d = document.getElementById('but'); d.style.width=screen.width/2; } </script>
    <style type='text/css'> body{ position: relative; } button { display: block; position: relative;  } </style>
    </head>

    <body style='text-align:justify;color:white;'>
        Text<br/>
        <button id='but' >Scary!</button>
        <script> window.onload=SetWidth; </script>
    </body>
</html>

【问题讨论】：

标签： android html webview android-webview

【解决方案1】：

我已经使用 DIV 完成了这项工作，我需要精确地达到屏幕分辨率的 X%。我完成此操作的方法是在页面加载后使用 JQuery，因为 JQuery 可以检测确切的屏幕宽度，然后您可以进行数学运算，并将宽度设置为 X 像素。

$(document).ready(function() {
 var = myWidth = screen.width;
myWidth = myWidth / 2;
$('#button').width(myWidth);
});

我还没有检查过.. 但是我向你保证这个概念是正确的

另外：确保此代码位于页面底部，以确保它在页面元素加载后呈现。

【讨论】：