从javascript函数获取屏幕宽度并以百分比形式使用

我必须根据屏幕的宽度调整表元素的大小。我不懂javascript或html，但我必须让它发挥作用。我没有写原来的asp页面，也不能对它做太多改变

例如，在以下代码示例中，

SCREENWIDTH

是变量或函数调用的占位符：

<td>
  <div style="width:(SCREENWIDTH * 2 / 3)%">
    <input type="text" class="textfield" id="resourceref" name="resourceref"
      accesskey="E" onkeydown="infoChange('ref');" style="width: 90%">
  </div>
</td>

在head标记中，我必须如何从html调用它

---

那么，作为td宽度确定的一部分，我如何获得屏幕宽度呢？

应该只需要执行

screen.width

即可获得以像素为单位的屏幕宽度。不过，在这种情况下，您不使用宽度：66.666%有什么特别的原因吗？

屏幕宽度和高度很棘手，因为不同的浏览器处理它的方式不同。 我建议查看jquery，并使用一些有用的工具来调整大小。特别是在调整事件大小等方面

以下是一个例子：

         $(window).resize(function() {   
           // event which gets fired on rezising
            $(window).height(); // the new height 
            $(window).width(); // the new width
          });

您可以使用此信息进行进一步的计算和样式设置当然

比如说

    $('#theDiv').width(function(){
   return $(window).width() * 0.66;
});

它的工作方式不引人注目（没有内联javascript），只需给div一个ID即可

---

HTH

我使用了这个函数，我编写的这个函数可以正确地报告我尝试过的每个设备

这将允许您根据实际屏幕大小计算百分比。我从iPad宽度（768）开始，然后计算%（屏幕宽度/768）*100

希望这有帮助

function getDeviceDimensions()                  // get the width and height ofthe viewing device based on its OS
{
    screenWidth = window.screen.width;                                                  // get the width
    screenHeight = window.screen.height;                                                // get the height 
    var computedPixelRatio =  (window.screen.availWidth / document.documentElement.clientWidth);                        // a more reliable measure of device pixel ratio due to android firefox bugs...
    computedPixelRatio = window.devicePixelRatio >= computedPixelRatio ? window.devicePixelRatio : computedPixelRatio;  // select whichever value is larger between pixel ratio methods
    if (navigator.userAgent.indexOf('Android') != -1)                                   // if the client is on an android system
    {
        screenWidth = screenWidth / computedPixelRatio;                                 // divide the reported width by the pixel ratio
        screenHeight = screenHeight / computedPixelRatio;                               // divide the reported height by the pixel ratio
    }
    //alert(screenWidth + " " + screenHeight + " " + window.devicePixelRatio + " " + computedPixelRatio);
}

---

基于屏幕宽度（以像素为单位）计算百分比是没有意义的。我遗漏了什么，或者你不能将宽度设置为66%（全宽的2/3）？你是否尝试过在

%

中向

表中添加
宽度
，比如
70%
，
表将覆盖70%的帧，无论帧大小如何，
td
和
tr
可能有
100%
，无论表格大小如何，它们都会覆盖整个表格。我有一个疑问，OP将
%
中的
宽度
分配给
div
，该div位于
td
内，然后不管怎样，该
div
将具有与
td
的相对宽度，而不是屏幕的宽度，对吗？宽度为66.666，是的，这是真的，但是基于screen.width获取宽度，这不会发生。我在W3schools HTML编辑器上玩，因为我感到困惑，希望看到快速的结果。实际上，div似乎有助于调整大小。我在某个地方读过，虽然我记不起是在哪里提出的。我对这个部门不忠诚。如果它造成了一些阻碍，它可以被删除。@bizzehdee，我编辑了原始帖子，解释为什么我不使用普通百分比。
function getDeviceDimensions()                  // get the width and height ofthe viewing device based on its OS
{
    screenWidth = window.screen.width;                                                  // get the width
    screenHeight = window.screen.height;                                                // get the height 
    var computedPixelRatio =  (window.screen.availWidth / document.documentElement.clientWidth);                        // a more reliable measure of device pixel ratio due to android firefox bugs...
    computedPixelRatio = window.devicePixelRatio >= computedPixelRatio ? window.devicePixelRatio : computedPixelRatio;  // select whichever value is larger between pixel ratio methods
    if (navigator.userAgent.indexOf('Android') != -1)                                   // if the client is on an android system
    {
        screenWidth = screenWidth / computedPixelRatio;                                 // divide the reported width by the pixel ratio
        screenHeight = screenHeight / computedPixelRatio;                               // divide the reported height by the pixel ratio
    }
    //alert(screenWidth + " " + screenHeight + " " + window.devicePixelRatio + " " + computedPixelRatio);
}