Question

我想要改变方向以适应移动浏览器。当方向改变时，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）中，它不会......

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

希望这有帮助，并且您可以使用移动调试程序来解决您的问题。

Answer 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中出现不需要的操作。

更改：（div标记低于第二个td）

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

Answer 3

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

Answer 4

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

上次我拔掉头发因为Android总是返回“错误”的方向（横向纵向，纵向横向），当iOS报告反过来时。

这就是为什么JQM recommends在使用width / height和orientationchange时绑定到调整大小而不是 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？），但布局应该更改。

希望这有帮助。

Answer 5

我不知道的是if ($(window).width() > 600) return;您不希望定位高rez设备？

我可能错了，但如果paysage和大多数recnt android和iphone（＆gt; HVGA和Iphone视网膜），它不会结束这个事件hanling功能？

Answer 6

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

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

6 个答案: