Is it possible to set a ViewTemplate to appear only in mobile mode?

[si]

As per the title, I'm wondering if there is a way to set a ViewTemplate to appear at the bottom of every tiddler in my wiki, but only while in mobile mode.

I know that I could create a manual toggle button to do this, but am wondering if there is any way to have this work automatically?

[Mark S.]

Thinking out loud.

Looking at InfoMechanism, it seems the only information TW exposes that might be useful are the screen dimensions. On some phones, the screen ratio is 2. On most many desktop screens it's less than two. So maybe a viewtemplate could check the ratio, and based on that display or not display information. It would depend on what the ratios are for your particular desktop and particular phone.

Now I'm waiting for someone to pop up with "there's a new undocumented 'is mobile" tiddler" ...

[si]

>>> Now I'm waiting for someone to pop up with "there's a new undocumented 'is mobile" tiddler" ...

It seems there is! I searched the shadow tiddlers and there's a bunch of them for various different types of browser/platform, all with the prefix "$:/info/browser/is/".

So for android I just used the following filter:

<$list filter="[[$:/info/browser/is/android]get[text]match[yes]]">
Here is what I want to appear in mobile mode.
</$list>

Thank you very much @Mark!

[Eric Shulman]

On Monday, December 14, 2020 at 12:28:46 PM UTC-8 si wrote:

various different types of browser/platform, all with the prefix "$:/info/browser/is/".

These are added by the "browser-sniff" plugin, which is installed on tiddlywiki.com, but is NOT installed in the empty.html

-e

[si]

Ahh ok thank you Eric, that's good to know.

[TW Tones]

Si,

There are tiddlywiki themes etc for mobile use. Whilst the screen size can be determined and I believe start-up actions can be triggered to respond to such screen sizes I believe the main approach to mobile is using CSS and its features to respond to screen sizes. CSS allows you to hide the display of some elements and display others. Where screen parameters and start up actions can perhaps implement other settings.

In 5.1.23 we now have the ability to switch layouts easily so perhaps use this feature to build a mobile layout?

Basically quite a few people have being making use of screen sizes and CSS for some time. 

Regards

Tones

[Jeremy Ruston]

There is indeed no simple flag in TiddlyWiki for mobile vs. desktop because we’ve long passed the point where the underlying distinction is simple. Instead, as Tones points out, designers use CSS to craft interfaces that gracefully respond to different screen sizes and JavaScript to make behaviours that work differently across platforms eg for touch vs. mouse. Even there, there’s a lot of confusion: many devices support both touch and mouse, and all of them make some attempt to emulate between the two.

In your case, it sounds like the simplest thing might be to wrap your custom view template in a class, and then use CSS to hide that class if the screen size is larger than a particular cut-off that works for your devices.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/28fcbc05-1f19-419b-bf53-c0de492efad0n%40googlegroups.com.