jQuery.width（）返回百分比宽度而不是像素宽度
[英]jQuery.width() is returning percentage width instead of pixel width
问题描述
Please have a look at the following 2 jsFiddle examples: 
请看以下2个jsFiddle示例：
Example number 1 示例编号1
The first one is pure html and a single call to the Jquery width function which then return the width as expected in pixels. 第一个是纯html，并且是对Jquery width函数的单个调用，然后按预期返回宽度（以像素为单位）。
Demo with pure HTML 纯HTML演示
HTML : HTML ：
<body class="ui-mobile-viewport ui-overlay-a" data-pinterest-extension-installed="cr1.38.2" style="background-color: rgb(255, 182, 50);">
<div data-role="page" data-theme="b" id="mailiPage" style="">
<div id="mainDiv" data-role="content" class="ui-content" data-theme="b" style="text-align:center;background-color:#ffb632;background-image:none;height:100%">
<div class="ui-grid-b">
<div id="left" class="ui-block-a" style="width:5%;"></div>
<div id="center" class="ui-block-b" style="width:90%;"></div>
<div id="right" class="ui-block-c" style="width:5%;"></div>
</div>
</div>
</div>
</body>
JAVASCRIPT: JAVASCRIPT：
alert('this width of the center div is in pixels: ' + $('#center').width() + '\n');
Example number 2 示例2
The second example include the javascript that is used to write the html dynamically and than a call to the width function which in this case return the percentage value and not the pixel width. 第二个示例包括用于动态编写html的javascript，以及对width函数的调用，在这种情况下，该函数返回百分比值而不是像素宽度。
Demo with only Javascript 仅使用Java演示
JAVASCRIPT: JAVASCRIPT：
var strPage = ""
var leftSideColumnsWidth = 5;
var rightSideColumnsWidth = 5;
var centerColumnsWidth = 90;
$("body").empty();
strPage = strPage + "<div data-role='page' data-theme='b' id='mailiPage' style=''>"
strPage = strPage + "<div id='mainDiv' data-role='content' class='ui-content' data-theme='b' style='text-align:center;background-color:#ffb632;background-image:none;height:100%'>" //padding-top: 56px;'>"
strPage = strPage + "<div class='ui-grid-b'>"
strPage = strPage + "<div id='left' class='ui-block-a' style='width:" + leftSideColumnsWidth + "%;'>"
strPage = strPage + "</div>"
strPage = strPage + "<div id='center' class='ui-block-b' style='width:" + centerColumnsWidth + "%;'>"
strPage = strPage + "</div>"
strPage = strPage + "<div id='right' class='ui-block-c' style='width:" + rightSideColumnsWidth + "%;'>"
strPage = strPage + "</div>"
strPage = strPage + "</div>"
strPage = strPage + "</div>"
strPage = strPage + "</div>"
$("body").append(strPage);
alert('this width of the center div is not in pixels but in percentage: ' +$('#center').width()+'\n');
Any idea why is it deffer? 知道为什么会有所不同吗？
UPDATE: 更新：
In the dynamic version if you mark out the first div which define the JQM page and include "data-role='page'", the width function will return the value in pixels!! 在动态版本中，如果标记出定义JQM页面并包含“ data-role ='page'”的第一个div，那么width函数将返回以像素为单位的值！ Now the question remains WHY? 现在的问题仍然是为什么？
1 个解决方案
解决方案1
4 已采纳 2015-07-21 11:30:49
jQuery Mobile pages ie div elements with [data-role=page] are initially hidden. jQuery Mobile页面即带有[data-role=page] div元素最初被隐藏。 And for hidden elements: 对于隐藏元素：
The value reported by
.width()is not guaranteed to be accurate when the element or its parent is hidden..width()报告的值是准确的。 To get an accurate value, ensure the element is visible before using.width()..width()之前确保该元素可见。 jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance.
Having said that, you might want to look at this example , which hooks pageshow events to determine if the page (and therefore the element) is visible. 话虽如此，您可能想看一下这个示例 ， 该示例挂接pageshow事件以确定页面（因此元素）是否可见。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.