Webkit JQuery Mobile塊內聯轉換不起作用

我試圖在移動瀏覽器上進行方向更改。當方向更改div時，「wrapStat」應該在內嵌和塊顯示之間切換。Webkit JQuery Mobile塊內聯轉換不起作用

這個完整的文本塊每隔X秒被一個ajax調用代替，所以在wrapStat類本身上放置一個樣式將不起作用。我正在更改portraitCustomStats和landscapeCustomStats之間的父級#CustomStats類，具體取決於方向。

這項工作在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（文字變成了「風景」的紅色和藍色的「肖像」只是讓你知道它的工作）。在FF它會顯示內聯和阻止你一個更廣泛的觀點和狹隘的觀點之間去...

在WebKit的（Safari和Chrome），它不會......

來源

2012-05-21 Hupperware

我相信我已經找到了答案......

原文：

<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導致不良行動的webkit包含div。

變化：（低於第二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-29 16:22:45 Hupperware

不錯，很高興你能解決問題。那麼，我爲自己的努力獲得賞金嗎？ :) – christurnerio

來自我之前的評論：沒有理由在td（block）內部的跨度（內聯）內部的強制內部（默認爲內聯）內設置div（默認爲block）。我想如果你簡化並清理你的標記，問題就會消失。祝你好運。 – Ringo

嘗試從取出!important你都css類。

來源

2012-05-24 03:46:06 boring

我做到了這一點。我不相信這是一個CSS問題。我認爲這是webkit不喜歡塊和內聯之間的切換，沒有內容刷新。 – Hupperware

我不能說在瀏覽器中的webkit處理。我可以說的是，orientationchange在各種設備和瀏覽器中被檢測到不同。這會引起頭痛......（example）。

上次我拉我的頭髮，因爲Android的總是返回的「錯誤」的方向（縱向橫向，風景人像），當iOS的報告說，它周圍的其他方法。

這就是爲什麼JQM recommends綁定到與寬度/高度和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？），儘管佈局應該改變。

希望這會有所幫助。

來源

2012-05-24 22:56:12 frequent

我不明白if ($(window).width() > 600) return;你不想瞄準高雷茲裝置？

我可能是錯的，但它不會結束這個事件hanling函數如果paysage和大多數recnt android和iphone（> HVGA和iphone視網膜）？

來源

2012-05-25 14:09:53 Ernoriel

有兩種不同的看法。我不希望這種邏輯用於平板電腦。它總是內聯的。 – Hupperware

我對平板電腦沒問題，但所有最近使用的設備都有1或2個尺寸高於600像素（例如Iphone 4S 960 * 640）的尺寸，因此您可以針對除舊設備以外的其他設備屏蔽事件。 – Ernoriel

我做了一些測試，但無法重現問題。您是否嘗試過在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上的頁面。當我這樣做時，我能夠看到塊和內聯樣式在#changeMe div上正確切換。無論內容是否通過ajax加載，這都應該工作。

希望這會有所幫助，並且您可以使用移動調試器來解決您的問題。

來源

2012-05-25 15:10:32 christurnerio

+1對於移動的jsfiddle尖... 這裏是代碼的實際的jsfiddle沒有工作... http://jsfiddle.net/Hupperware/43eK8/5/ 移動視圖：HTTP：// jsfiddle.net/m/rat/ 這適用於Firefox（文本在「風景」中變爲紅色，在「肖像」中變爲藍色，所以您知道它正在工作）。在FF它會顯示內聯和塊，你更寬的視野和窄視圖之間去... 在WebKit的（Safari和Chrome），它不會...... – Hupperware

我嘗試了我的iPhone的樣品和我不」沒有注意到任何變化，但我認爲這一定是由於另一個問題。它實際上讓我的手機瀏覽器崩潰了幾次。看看這個：http://jsfiddle.net/gizmovation/tV8p4/和移動視圖：http://jsfiddle.net/m/mzw/。嘗試打開手機上的移動視圖並更改方向。列表項從塊到內聯。這是問題，對嗎？我會假設它在這裏工作，你也可以讓你的工作。如果你可以將樣品分解成更小的樣品，也許我可以提供進一步的幫助。 – christurnerio

這是網格標題是信用卡Txns可摺疊下的問題。標題總銷售移動（就像它在我的做法）和顏色的變化（也是我的），但藍色的統計數據應該向上移動（.wrapStat）與黑色統計內聯並變成紅色......這在兩個版本中都沒有發生。嚴格來說，這些統計信息行在WebKit中不起作用。 – Hupperware

你上面粘貼的html會搞砸了。你有一個未封閉的強標籤。你可能根本不應該有一個強大的標籤，或者如果你這樣做，把它放在div中，而不是在外面。你有一個跨度包裹。這在語法上是非常不正確的，我並不感到驚訝，它不能可靠地呈現。默認情況下跨度是內聯的，然後你在內聯元素中放入一個tr。你會如何期待這個渲染？如果可以的話，嘗試完全刪除tr和td，而不是使用浮動div。如果您絕對需要使用表格，請正確構建表格。嘗試簡化標記。標記越複雜，錯誤的可能性就越大。如果您有多個標記錯誤，不同的瀏覽器可能會以不同的方式處理糟糕的標記。沒有理由在td（塊）內部的跨度（內聯）內部有strong（默認內聯）內部的div（默認爲block）。我想如果你簡化並清理你的標記，問題就會消失。祝你好運。

來源

2012-05-27 03:39:20 Ringo

這是從頁面渲染中拉出並截斷的。 td塊正如jsFiddles所示正確嵌套。感謝您查看此問題。 – Hupperware

Webkit JQuery Mobile塊內聯轉換不起作用

回答

相關問題