I have only commented on the most obvious.
I see only a few use cases where it is a matter of showing and hiding some text passages. When I was investigating this extension a few years ago, I was looking for a solution to support different layouts for desktop and mobile devices. I envisaged a three to four column layout for desktop, while it should be only one column for mobile devices.
Below is a simple example to illustrate the idea. It does not work with the 2.x extension. With the version in my fork, however, the example works.
- Remark
- On desktops it should show four colums, on mobile devices one column.
; You see this on a <nomobile>desktop</nomobile><mobileonly>mobile device</mobileonly>
<table class="wikitable" width="100%">
<tr>
<td width="<nomobile>25</nomobile><mobileonly>100</mobileonly>%">1. CELL</td>
<mobileonly></tr><tr></mobileonly>
<td width="<nomobile>25</nomobile><mobileonly>100</mobileonly>%">2. CELL</td>
<mobileonly></tr><tr></mobileonly>
<td width="<nomobile>25</nomobile><mobileonly>100</mobileonly>%">3. CELL</td>
<mobileonly></tr><tr></mobileonly>
<td width="<nomobile>25</nomobile><mobileonly>100</mobileonly>%">4. CELL</td>
</tr><tr>
<td>5. CELL</td>
<mobileonly></tr><tr></mobileonly>
<td>6. CELL</td>
<mobileonly></tr><tr></mobileonly>
<td>7. CELL</td>
<mobileonly></tr><tr></mobileonly>
<td>8. CELL</td>
</tr>
</table>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">1. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">2. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">3. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">4. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">5. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">6. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">7. cell</div>
<div style="width:<nomobile>24.5</nomobile><mobileonly>100</mobileonly>%; border:1px solid green; float:left;">8. cell</div>
<br style="clear:both" />
; This will someone see on a <nomobile>mobile device</nomobile><mobileonly>desktop</mobileonly>
<table class="wikitable" width="100%">
<tr>
<td width="<nomobile>100</nomobile><mobileonly>25</mobileonly>%">1. CELL</td>
<nomobile></tr><tr></nomobile>
<td width="<nomobile>100</nomobile><mobileonly>25</mobileonly>%">2. CELL</td>
<nomobile></tr><tr></nomobile>
<td width="<nomobile>100</nomobile><mobileonly>25</mobileonly>%">3. CELL</td>
<nomobile></tr><tr></nomobile>
<td width="<nomobile>100</nomobile><mobileonly>25</mobileonly>%">4. CELL</td>
</tr><tr>
<td>5. CELL</td>
<nomobile></tr><tr></nomobile>
<td>6. CELL</td>
<nomobile></tr><tr></nomobile>
<td>7. CELL</td>
<nomobile></tr><tr></nomobile>
<td>8. CELL</td>
</tr>
</table>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">1. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">2. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">3. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">4. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">5. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">6. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">7. cell</div>
<div style="width:<nomobile>100</nomobile><mobileonly>24.5</mobileonly>%; border:1px solid green; float:left;">8. cell</div>
<br style="clear:both" />