This question about Configuration: Answered

Adapt display size to small devices?

How can I automatically adapt the width of my main window if the user has a small device, like a tablet or evena a smartphone?

My wiki is now set similarly to this foswiki with a border around the main text window, but that takes a lot of space on small devices.

  • a) can foswiki (or even my server?) notice the use of a small screen and adapt automatically to a different CSS, like we know it from the print preview?

  • b) if not automatically is it possible for the user to click somewhere telling he's using a small device and foswiki remembers the setting of a different CSS or Template?

  • c) By the way, while testing I discovered one thing I do not understand: When I add ?cover=skin to the URL, I get the print version (like on foswiki), but when I set SKIN = print in my site preferences, then I still see the frame defined by my layout.css

-- LieVen - 07 May 2014

I'm not sure about a or b. Regarding COVER and SKIN. The COVER setting is designed to apply on top of a skin. So setting SKIN=print,pattern is the similar to setting COVER=print. If you just set SKIN=print then you don't have a complete skin available.

I'm not sure of the complete interaction though, as there are subtle differences between SKIN=print,pattern and COVER=print

-- GeorgeClark - 07 May 2014

a) No. There are no existing mechanisms in the Perl for changing CSS based on the screen. That's because the browser doesn't pass enough information in the request to be able to make that decision. There is a CSS media selector, however, so you can make screen size decisions within your CSS (though it is poorly supported).

b) Yes, if you implement it. You could set a COVER based on user's clicks.

c) Subtle? Not so much.
  1. ?skin= or, if it is not defined, SKIN, defines the "skin path". Then
  2. ?cover= gets prepended to this skin path. Then
  3. COVER, if it is defined, gets prepended to the skin path.

The rationale of ?skin= overriding SKIN is that you can override the base SKIN setting totally from parameters. This is all that existed at first, before COVER was invented.

The rationale for COVER sitting over ?cover= is that COVER can be used in a non-XSSable way to stomp anything ?cover might define.

Use ?skin= and SKIN requires the definition of a complete skin path, while ?cover= and COVER are additive on top of the skin path.

-- CrawfordCurrie - 08 May 2014

Hi, and thanks a lot for your answers. I must apologize for not asking precisely, because when I write "Is it possible", I meant to ask "Please tell me how to do that".
Anyway, for a) there are many other websites asking the visitor "do you want to change to mobile view?" So there must be something provided from the browser. Maybe it's just not compatible with foswiki? I don't know. Maybe it's not necessary if b) works: What does that mean "You could set a COVER based on user's clicks"?

What I would be glad of if there were way for any users (registered or not) to click a button and ten view anything for instance with the "print"-cover. How can I do that?

-- LieVen - 27 May 2014

Okay, no answer for a long time, so I'm searching for a different solution. The idea was to set up a separate "entrance" or a separate wiki only for mobile users which does have access to the same data. Is that possible? What I mean is for instace the main wiki is wiki.something.com and mobile users can acces mobile.something.com and they can use a different layout which is set in the preferences. Will that work? It may also work using some kind of include-trick?

-- LieVen - 26 Aug 2014

There are two schools here:

  1. two entries on the same data as you proposed
  2. write your html to be responsive to screen resolutions

NatSkin tries to follow (2). Have a look at https://demo.michaeldaumconsulting.com Have a look at some of the <meta ...> headers in the html sources. i.e.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5, user-scalable=yes" />

which is a requirement among other things for responsive html.

The second thing to look for is "media queries" which let you add css depending on the viewport properties of a mobile device. Please google for media queries. Some links:

Baseline: PatternSkin isn't ready for mobile devices out of the box.

-- MichaelDaum - 26 Aug 2014
 

QuestionForm edit

Subject Configuration
Extension PatternSkin
Version Foswiki 1.1.9
Status Answered
Related Topics
Topic revision: r6 - 26 Aug 2014, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy