Question

我有一些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>

Answer 1

我用DIV完成了这项工作，我需要完全达到屏幕分辨率的X％。我完成这个的方式是在页面加载后使用JQuery，因为JQuery可以检测到确切的屏幕宽度，然后你可以进行数学计算，并将宽度设置为正好X像素。

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

我还没检查过......但是我保证你的概念是合理的。

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

Webview中的Html按钮宽度（以百分比表示）

1 个答案: