Javascript Webkit JQuery移动块到内联转换不起作用

我打算在移动浏览器上做一个方向的改变。当方向改变时，div“wrapStat”应该在内联和块显示之间改变

这个完整的文本块每X秒被ajax调用替换一次，因此在wrapStat类本身上添加样式将不起作用。我正在根据方向更改parent#CustomStats类在肖像CustomStats和景观CustomStats之间的位置

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

webkit和动态更改内联和块样式是否存在问题

css:

javascript:

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

$(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');
        }
    });

});​

HTML:

独特访客

(1,318)
85.43%

下面是JSFIDLE代码实际上不起作用

移动视图：

这在Firefox中有效（文本在“横向”中变为红色，在“纵向”中变为蓝色，这样你就知道它在工作）。在FF中，当您在较宽视图和较窄视图之间移动时，它将显示内联和块

---

在Webkit（Safari和Chrome）中，它不会尝试删除

！重要信息

来自两个css类。

我不能说浏览器中的webkit处理。我能说的是，不同的设备和浏览器检测到的方向变化是不同的。这会引起头痛。。。().

上次我把头发拔出来是因为Android总是返回“错误”的方向（横向中的纵向，纵向中的横向），而iOS则相反

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

所以我的第一个建议是：你能不能改为绑定调整大小

如果您想坚持使用OrientionChange，下面是我正在使用的一个脚本，它似乎工作正常：

// 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
                          }
               }

这将在第二个处理器中结束。您需要一个阈值宽度（600px？），但在该宽度下布局应该更改

---

希望这有帮助。

我没有得到的是

if（$（window）.width（）>600）返回您不想针对高rez设备吗

我可能错了，但如果paysage和最新的android和iphone（>HVGA和iphone retina），汉林功能不会结束这一事件吗？
我做了一些测试，无法重现问题。您是否尝试过在JSFIDLE上测试移动调试功能

我把下面这个简单的例子放在一起

HTML:

Javascript:

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

$(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');
        }
    });

});​

下面是一个指向工作JSFIDLE的链接：

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

希望这对您有所帮助，并且您能够使用移动调试器解决您的问题。
您在上面粘贴的html被弄乱了。您有一个未关闭的强标记。你可能根本不应该有一个强标签，或者如果你有，把它放在div里面，而不是外面。你有一个在tr包裹的跨度。这在语法上是非常不正确的，我一点也不奇怪它不能可靠地呈现。默认情况下，span是内联的，然后将tr放在内联元素中。你认为这将如何呈现？如果可以，尝试完全删除tr和td，只使用浮动div即可。如果您确实需要使用表，请正确构建表。尽量简化标记。标记越复杂，出错的空间就越大。如果您有多个标记错误，不同的浏览器可能会以不同的方式处理较差的标记。没有理由将div（默认为block）放在strong（默认为inline）的内部，而将span（inline）的内部放在td（block）的内部。我认为如果你简化和清理你的标记，问题就会消失。祝你好运。
我相信我已经找到了答案

原件：

<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>


总销售额
59549.16美元
($59,799.66)
0.42%

当您试图更改包含div的布局时，将span换行到div可能会导致webkit中出现不需要的操作

更改：（第二个td下方的div标签）


总销售额
59549.16美元
($59,799.66)
0.42%
我已经做到了。我不相信这是一个css问题。我认为webkit不喜欢在没有内容刷新的情况下在块和内联之间切换。我不希望这种逻辑用于平板电脑。它总是内联的。我对平板电脑没问题，但所有最近的设备都有1到2个高于600px的维度（例如Iphone 4S 960*640），所以除了旧设备之外，你可以阻止所有设备的事件。JSFIDLE移动提示+1。。。下面是JSFIDLE代码实际上不起作用。。。移动视图：这在Firefox中起作用（文本在“横向”中变为红色，在“纵向”中变为蓝色，这样你就知道它起作用了）。在FF中，当您在较宽视图和较窄视图之间移动时，它将显示内联和块。。。在Webkit（Safari和Chrome）中，它不会……我在我的iphone上试用了你的示例，但我没有注意到任何变化，但我认为这一定是由于另一个问题。它实际上使我的手机浏览器崩溃了好几次。看看这个：
.portrait {
    display: block !important;
}
.landscape {
    display: inline !important;
}
#changeMe {
    color: blue;
}

$(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');
        }
    });

});​

<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>

<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>