Webkit JQuery Mobile块转换为内联转换无法正常工作。

5
我正在尝试在移动浏览器上实现方向更改。当方向更改时,div“wrapStat”应该在内联和块显示之间更改。
由于每X秒钟通过ajax调用替换完整的文本块,因此在wrapStat类本身上放置样式将不起作用。根据方向,我在父级#CustomStats类之间更改portraitCustomStats和landscapeCustomStats。
这适用于Firefox(调整浏览器大小将翻转方向标志),但在任何Webkit浏览器中都无法工作,直到ajax调用触发为止。
是否存在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 中可以正常工作(文本在“横向”时变为红色,在“纵向”时变为蓝色,以便您知道它正在工作)。在 Firefox 中,当您在更宽的视图和较窄的视图之间切换时,它将显示为内联和块状...

但在 Webkit(Safari 和 Chrome)中则不会...

6个回答

3

我进行了一些测试,但无法重现问题。您是否尝试在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 移动版的提示... 这里是实际上未能正常工作的代码的 jsFiddle...http://jsfiddle.net/Hupperware/43eK8/5/移动视图:http://jsfiddle.net/m/rat/在 Firefox 中可以工作(文本在“横向”中变为红色,在“纵向”中变为蓝色,以便您知道它正在工作)。 在 Firefox 中,当您在更宽的视图和较窄的视图之间切换时,它将显示为内联和块状...在 Webkit(Safari 和 Chrome)中不会... - Hupperware
我在我的iPhone上尝试了你的示例,但我没有注意到任何变化,但我认为这一定是由于其他问题。它实际上使我的手机浏览器崩溃了几次。请查看:http://jsfiddle.net/gizmovation/tV8p4/ 和移动视图:http://jsfiddle.net/m/mzw/。请在您的手机上打开移动视图并更改方向。列表项从块转换为内联。这就是问题所在,对吧?我想如果它在这里起作用,那么你也可以让你的工作。如果你能将你的示例分解成更小的东西,也许我可以提供进一步的帮助。 - christurnerio
问题出在信用卡交易折叠面板下的网格标题。标题“总销售额”会移动(就像我的一样),颜色也会改变(也和我的一样),但是蓝色的统计数据应该向上移动(.wrapStat)与黑色的统计数据对齐并变为红色……但是这在任何版本中都没有发生。在WebKit中,只有统计数据行不按预期运行。 - Hupperware
好的,我能够看到颜色变化。我修剪了你的示例:http://jsfiddle.net/gizmovation/SCXf6/ 当我在我的iPhone上打开移动视图并改变方向时,我得到了颜色变化和布局移位。我查看了调试器,发现内联/块显示正在切换。你看到布局移位了吗?另外,请告诉我你是如何测试这个的。 - christurnerio
我正在通过iPhone上的jsfiddle移动选项进行测试。即使是经过简化的示例,布局仍然会发生变化,但标签wrapStat的内联/块仍然无法正常工作。总销售标题旁边的货币数字应该在横向模式下放在一行上,在纵向模式下分开成几行。这种错误的行为只出现在webkit浏览器中。 - Hupperware
1
我理解你想要实现的功能,但我认为问题出在你的HTML结构上,而不是Webkit浏览器无法处理内联/块级变化(那将是一个巨大的问题)。也许你可以尝试通过w3cvalidator运行你的页面:http://validator.w3.org/,看看它会给出什么结果。 - christurnerio

2

I believe I've found the answer...

Original:

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

似乎在一个span标签包裹一个div标签时,当你试图改变包含div标签的布局时,会导致Webkit出现不良反应。

修改:(第二个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>

1
很好,很高兴你解决了它。那么,我能得到你的赏金作为我的努力吗? :) - christurnerio
从我之前的评论来看,没有理由在td元素(默认为块级元素)内部使用strong元素(默认为行内元素),再在strong元素内部使用div元素(默认为块级元素),最后再将div元素放在span元素(行内元素)内部。我认为如果你简化和清理你的标记,问题就会解决。祝你好运。 - Ringo

0

关于浏览器中webkit的处理,我无法作出评论。但我可以说的是,在不同的设备和浏览器中,方向变化的检测方式是不同的。这可能会引起一些麻烦...(example)。

上次我因为Android总是返回“错误”的方向(横屏模式下的竖屏方向,竖屏模式下的横屏方向),而iOS则相反,所以我非常苦恼。

这就是为什么JQM建议在处理宽度/高度和方向变化时绑定到resize而不是orientationchange。Resize将与每个方向变化同时触发,因此您不受事件的浏览器实现的影响。

因此,我的第一个建议是:您能否改为绑定到resize?

如果您想坚持使用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?)来更改布局。

希望这可以帮助到您。


0

尝试从您的CSS类中删除!important


我已经做了。我不认为这是CSS问题。我认为这是Webkit不喜欢在没有内容刷新的情况下在块和内联之间切换。 - Hupperware

0
我不明白的是 if ($(window).width() > 600) return; 这段代码,你不想针对高分辨率设备吗?
我可能错了,但这个事件处理函数是否会在横屏模式下以及大多数最新的安卓和 iPhone(> HVGA 和 Iphone retina)结束?

有两种不同的视图。我不希望这个逻辑用于平板电脑。它总是内联的。 - Hupperware
我对平板电脑没问题,但是所有最近的设备都比600像素高1或2个维度(例如iPhone 4S 960 * 640),所以你会阻止除旧设备外的所有设备的事件。 - Ernoriel

0

你粘贴的HTML代码有问题。你的标签没有闭合。你可能根本不需要标签,或者如果一定要用,应该把它放在

里面而不是外面。你将一个包在里面。这样语法上是非常错误的,很难稳定地呈现出来。默认情况下,是内联元素,而你却将放在内联元素内部。你认为这会产生什么样的效果呢?如果可以的话,尝试完全删除和,改用浮动的
。如果你非常需要用表格,那就正确地构建它。尽量简化代码,代码越复杂,出错的可能性就越高。如果有多个标记错误,则不同的浏览器可能会以不同的方式处理糟糕的标记。没有理由在(默认为块)的内部使用
(默认为块),再在
的内部使用(默认为内联)以及(内联)。我认为如果你简化并清理你的标记,问题将会消失。祝你好运。


这是从页面渲染中提取并截断的。td块嵌套正确,正如jsFiddles所示。感谢您关注此问题。 - Hupperware

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接