Topic on Extension talk:MobileDetect/Archive 2

Fixed in version 2.3, divs changed for spans.

You can not do simple things like

I'm working with my “<mobileonly>mobile device</mobileonly><nomobile>‎desktop</nomobile>” the hole day long.

because it will be expanded as

I'm working with my “<div style="">mobile device</div><div style="display: none;">‎desktop</div>” the hole day long.

so the <div> tag will break the paragraph. :-(

"I'm working with my “

mobile device

‎desktop

” the hole day long."

I changed divs for spans in version 2.3+

Spans should be able to do all divs did before but without this issue you point out.

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

Could you link to your fork so I can learn from it?

"Learn from it"?

The hack I did in my fork I published here, see chapter "Version 3.0".--WikiForMen (talk) 14:04, 4 October 2022 (UTC)

I have created a special version of the extension to be able to test different scenarios simultaneously. For this purpose, I have created a test page on which several tasks are created. I hope this helps you. See here! --WikiForMen (talk) 12:38, 4 October 2022 (UTC)

I have added markers in nested structures for more testing... --WikiForMen (talk) 13:59, 4 October 2022 (UTC)