3

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

1 回答 1

1

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

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

我还没有检查过……但是我向你保证，这个概念听起来很不错

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

于 2012-07-20T20:07:13.120 回答