Webkit JQuery Mobile 块到内联转换不起作用答案

【问题标题】：Webkit JQuery Mobile block to inline Transition Not FunctioningWebkit JQuery Mobile 块到内联转换不起作用
【发布时间】：2012-05-21 22:09:28
【问题描述】：

我正在尝试更改方向以在移动浏览器上工作。当方向改变时，div“wrapStat”应该在内联和块显示之间改变。

这个完整的文本块每隔 X 秒就会被一个 ajax 调用替换，因此在 wrapStat 类本身上放置一个样式是行不通的。我正在根据方向更改 PortraitCustomStats 和 LandscapeCustomStats 之间的父 #CustomStats 类。

这在 Firefox 中有效（调整浏览器大小将翻转方向标志）但在 ajax 调用触发之前在任何 webkit 浏览器中都无效。

webkit 和动态改变内联和块样式有问题吗？

css:

.portraitCustomStats .StatsRow .wrapStat {
    display: block !important;
}
.landscapeCustomStats .StatsRow .wrapStat {
    display: inline !important;
}

javascript：

$(window).bind('orientationchange', function (anOrientationEvent) {
    if ($(window).width() > 600) return;
    $("#CustomStats").attr("class", anOrientationEvent.orientation.toLowerCase() + "CustomStats").trigger("updatelayout");
});

HTML：

<span id="CustomStats" class="portraitCustomStats">
    <tr class="StatsRow">
      <td class="description">Unique Visitors</td>
        <td class="stat">
          <span class="UniqueVisitors">
            <strong>
            <div class="wrapStat">
              <span class="pastStat">(1,318)</span>
                <img src="../../Images/up_arr.gif" alt="increase">
                <span class="increasedStat">85.43%</span>
            </div>
           </span>
        </td>
    </tr>
</span>

这是代码的jsFiddle实际上不起作用...

http://jsfiddle.net/Hupperware/43eK8/5/

手机端查看：http://jsfiddle.net/m/rat/

这在 Firefox 中有效（文本在“横向”中变为红色，在“纵向”中变为蓝色，以便您知道它正在工作）。在 FF 中，当您在更宽的视图和窄的视图之间移动时，它会显示内联和阻塞...

在 Webkit（Safari 和 Chrome）中它不会...

【问题讨论】：

标签： javascript jquery jquery-mobile webkit

【解决方案1】：

我进行了一些测试，但无法重现该问题。您是否尝试过在 jsfiddle 上测试移动调试功能？

我整理了以下简单的例子。

HTML：

<body>
    <div id="changeMe">Hello World</div>
</body>

CSS：

.portrait {
    display: block !important;
}
.landscape {
    display: inline !important;
}
#changeMe {
    color: blue;
}

Javascript：

$(document).ready(function() {

    $('body').on('orientationchange', function() {
        console.log('updated orientation: ' + window.orientation);

        if (window.orientation == 0) {
            // portrait mode
            $('#changeMe').removeClass('landscape').addClass('portrait').text('Portrait Mode');
        } else {
            // landscape mode
            $('#changeMe').removeClass('portrait').addClass('landscape').text('Landscape Mode');
        }
    });

});

这是工作 jsfiddle 的链接：http://jsfiddle.net/gizmovation/9ALTU/

当您使用移动调试功能（运行按钮旁边的 wifi 小图标）时，您可以在您的 iphone 上打开该页面，同时在您的 PC 上进行调试。当我这样做时，我能够看到块和内联样式在#changeMe div 上正确切换。无论内容是否通过 ajax 加载，这都应该有效。

希望这会有所帮助，并希望您能够使用移动调试器来解决您的问题。

【讨论】：

+1 用于 jsFiddle Mobile 提示...这里是 jsFiddle 的代码实际上不起作用...jsfiddle.net/Hupperware/43eK8/5 移动视图：jsfiddle.net/m/rat 这在 Firefox 中有效（文本在 "风景”和“肖像”中的蓝色，只是为了让你知道它正在工作）。在 FF 中，当您在宽视图和窄视图之间切换时，它将显示内联和阻塞...在 Webkit（Safari 和 Chrome）中，它不会...
我在我的 iphone 上试用了您的样品，但没有发现任何变化，但我认为这一定是由于另一个问题。它实际上使我的手机浏览器崩溃了几次。看看这个：jsfiddle.net/gizmovation/tV8p4 和移动视图：jsfiddle.net/m/mzw。尝试在手机上打开移动视图并更改方向。列表项从块到内联。这就是问题，对吧？我会假设如果它在这里工作，你也可以让你的工作。如果你能把你的样品分解成更小的东西，也许我可以提供进一步的帮助。
信用卡 Txns 可折叠下的问题是网格标题。标题 Total Sales 移动（就像我的一样）和颜色变化（也像我的一样）但是蓝色的统计数据应该向上移动（.wrapStat）与黑色统计数据一致并变成红色......这个在任何一个版本中都没有发生。严格来说，WebKit 中没有表现的统计行。
好的，我看到了颜色的变化。我修剪了你的例子：jsfiddle.net/gizmovation/SCXf6 当我在我的 iphone 上打开移动视图并改变方向时，我得到了颜色变化和布局变化。我查看了调试器，内联/块显示正在切换。你看到布局变化了吗？另外，请告诉我你是如何测试这个的。
我理解你想要它做什么，但我认为是你的 html 结构导致了差异，而不是 webkit 浏览器无法处理内联/块更改（这将是巨大的问题）。或许您可以尝试通过 w3cvalidator 运行您的页面：validator.w3.org，看看会出现什么结果。

【解决方案2】：

我相信我已经找到了答案……

原文：

<tr class="StatsRow">
     <td class="description">Total Sales</td>
     <td class="stat">
          <span class="TotalSalesRow">
               <strong>$59,549.16</strong>
               <div class="wrapStat">
                    <span class="pastStat">($59,799.66)</span>
                    <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease">
                    <span class="decreasedStat">0.42%</span>
               </div>
          </span>
      </td>
</tr>

当您尝试更改包含 div 的布局时，似乎使用 span 包装 div 会导致 webkit 中出现不良行为。

更改：（低于 2nd td 的 div 标签）

<tr class="StatsRow">
     <td class="description">Total Sales</td>
     <td class="stat">
          <div class="TotalSalesRow">
               <strong>$59,549.16</strong>
               <div class="wrapStat">
                    <span class="pastStat">($59,799.66)</span>
                    <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease">
                    <span class="decreasedStat">0.42%</span>
               </div>
          </div>
      </td>
</tr>

【讨论】：

很好，很高兴你成功了。那么，我的努力会得到你的赏金吗？ :)
来自我之前的评论：没有理由在 td（块）内的 spans（内联）内的 strongs（默认内联）内有 div（默认阻止）。我认为如果你简化和清理你的标记，问题就会消失。祝你好运。

【解决方案3】：

尝试从您的两个 css 类中删除 !important。

【讨论】：

我已经做到了。我不相信这是一个CSS问题。我认为这是 webkit 不喜欢在没有内容刷新的情况下在块和内联之间切换。

【解决方案4】：

我不能说浏览器中的 webkit 处理。我可以说的是，在设备和浏览器中检测到的方向变化是不同的。这可能会导致头痛......（example）。

上次我拔掉头发是因为 Android 总是返回“错误”的方向（横向纵向，纵向横向），而 iOS 以相反的方式报告它。

这就是为什么JQM recommends 在使用宽度/高度和方向更改时绑定到 resize 而不是 orientationchange。调整大小将与每个方向更改一起触发，因此您独立于事件的浏览器实现。

所以我的第一个建议是：你可以绑定以调整大小吗？

如果你想坚持使用orientationchange，这是我正在使用的一个脚本，它似乎可以正常工作：

// trigger 
$(window).on('orientationchange', function(event){
      your_function(event);
      });

// function handling orientation
function  your_function(event) {
    ...
    if ( event ) {
        // portrait
        if (window.orientation == 0 || window.orientation == 180 ){
                // portrait stuff
        }
        // landscape
            else if (window.orientation == 90 || window.orientation == -90 ) {
                // landscape stuff
                }
        // any other event that's passed into here, you could feed RESIZE
        } else if ( $window.width() < THRESHOLD WIDTH) {
                // portrait stuff
                } else if ($window.width() > THRESHHOLD WIDTH) {
                          // landscape stuff
                          }
               }

现在，我只是将orientationchange 输入这个函数，它似乎工作正常。如果不是这样，我也可以更改为在调整大小时触发此事件，而不是像这样传递事件：

$(window).on('resize', function(event){
     your_function("I'm no event");
     });

这将在第二个处理程序中结束。您将需要一个阈值宽度（600px？），尽管布局应该改变。

希望这会有所帮助。

【讨论】：

【解决方案5】：

我没有得到if ($(window).width() > 600) return;，您不想针对高分辨率设备？

我可能错了，但如果 paysage 和大多数最近的 android 和 iphone（> HVGA 和 Iphone 视网膜），它不会结束这个事件处理功能吗？

【讨论】：

有两种不同的视图。我不希望这种逻辑用于平板电脑。它始终是内联的。
我对平板电脑没问题，但所有最近的设备都有 1 或 2 个尺寸高于 600 像素（例如 Iphone 4S 960 * 640），因此您可以阻止除旧设备以外的所有设备的事件。跨度>

【解决方案6】：

您在上面粘贴的 html 被搞砸了。你有一个未封闭的强标签。你可能根本不应该有一个强标签，或者如果你有，把它放在 div 里面，而不是外面。你有 tr 包裹在一个跨度中。这在语法上非常不正确，我一点也不惊讶它不能可靠地呈现。默认情况下，跨度是内联的，然后您将 tr 放在内联元素内。你希望这会如何呈现？如果可以，请尝试完全删除 tr 和 td，而只使用浮动 div。如果您绝对需要使用表格，请正确构建表格。尝试简化标记。标记越复杂，出错的空间就越大。如果您有多个标记错误，不同的浏览器可能会以不同的方式处理不良标记。没有理由在 td（块）内的 spans（内联）内的 strongs（默认为内联）内有 div（默认为块）。我认为如果你简化和清理你的标记，问题就会消失。祝你好运。

【讨论】：

这是从页面渲染中提取并被截断的。如 jsFiddles 所示，td 块正确嵌套。感谢您查看问题。