5

我很想改变方向以在移动浏览器上工作。当方向改变时，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）中，它不会...

4

6 回答 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 加载，这都应该有效。

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

于 2012-05-25T15:10:32.983 回答
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 的布局时，似乎有一个跨度包装 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>
于 2012-05-29T16:22:45.723 回答
0

我没有得到的是if ($(window).width() > 600) return;您不想针对高 rez 设备？

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

于 2012-05-25T14:09:53.387 回答
0

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

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

这就是为什么JQM 建议在使用 width/height 和orientationchange 时绑定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？），尽管布局应该改变。

希望这可以帮助。

于 2012-05-24T22:56:12.990 回答
0

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

于 2012-05-27T03:39:20.630 回答
0

尝试!important从你的两个 CSS 类中删除。

于 2012-05-24T03:46:06.133 回答