android - Android 4.2 ネイティブ アプリでのレスポンシブ (スタッキング) の問題

Question

しばらくの間、同じ方法を使用して、モバイルで列を積み重ねてきました。それが異常なことだとは思わないでください。私たちのリトマス試験は常に全面的に問題なく戻ってきました. 最近、Android デバイス (4.2 を実行している S4 mini) を使用しているクライアントから、レイアウトが壊れているという苦情が寄せられました。メディア クエリは問題なく実行され、メールのスタックされていない部分は意図したとおりに動作していましたが、スタックしようとしていた 3 つの列は頑固にスタックを拒否しました。

この問題を説明するために、大幅に簡略化したデモ コードを作成しました。

CSS:

@media only screen and (max-width: 660px) {

*[class].fl{float:left !important;}
*[class].wr{display:block !important;}
*[class].width320{width:320px !important;}
*[class].width300{width:300px !important;}
*[class].height20{height:20px !important;}

HTML:

<table width="600" class="width300" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td width="187" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
        <td width="20" class="wr fl width300 height20" style="font-size:1px; line-height:1px">&nbsp;</td>
        <td width="186" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
        <td width="20" class="wr fl width300 height20" style="font-size:1px; line-height:1px">&nbsp;</td>
        <td width="187" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
    </tr>
</table>