I want to make my webpages look descent on small screens. So far I knew I could do this redirecting to a “mobile” page when detecting a mobile os. I use apache and the .htaccess file has a line such as
But with L5 the OS (I guess) will identify as pureos which is the same with L13 or L15. So in this case I cannot continue with the above rewrite condition.
Clearly the correct would be to identify the screen size and not the OS. However I do not know how to do this. Does anyone here knows?
so this way you load main.css which is for big/normal screen and then cascade several conditional overrides based on screen size.
Note that this is absolutely irrelevant to the UA, you can simply resize the window to test small/tny css
What if you wanted an actual redirect rather than just using a different CSS file?
JavaScript maybe?
Both approaches rely on the mobile web browser reporting a small width rather than the actual width (which may be as respectable as a conventional desktop). More specifically, you really want to know the width in real world units, not the width in pixels.
I would not assume that.
It depends. A web browser configured for privacy will reveal no useful information in the user agent string anyway. But if the user agent is legitimate then it may be that you can distinguish PureOS on the Librem 5 from PureOS on the Librem 13 or 15. The only way to know is to look at both strings.
with js it’s much easier to manage (subscribe to events, take the width, apply css or go to new url) but the power and flexibility goes with higher risk of screwing everything
This post is essentially “How do you develop responsive web pages?”. I think most m.* or mobile.* type of redirects are gone nowadays in favor of using modern CSS features like media queries or CSS grid to have one layout that adapts to all screen sizes.
CSS frameworks like Bootstrap, Bulma, Foundation, etc. all exist to make doing these things even easier.
Seems too many website progammers seem to have programmed on a 38 inch screen with no regard for the customer. I had to scroll down on my bank’s website early on to get to the user and password boxes, and when I complained to the right people. the log in boxes mysteriously “moved up” a few days later.
Well said. I did a bit of researching on this topic recently and, as a developer with little front-end experience, I found Bootstrap’s grid system easy to learn (well enough) and effective.
I want to agree with spacemanspiffy, and strongly amplify it.
CSS is the way to go! What you’re looking for is what’s called a ‘fluid layout’. Css has the ability to detect screen width and change aspects of the page as is appropriate for various sizes. It really works very well when properly done.
To see it in action, take some pages you browse to, and once open in your browser of choice, drag the width of your browser narrower, to see how the display of the content changes. On many pages, but not all you’ll see that at certain width boundaries, i.e. as you go from wider to narrower, there will be a jump, where things like titles will suddenly change drastically, to make more sense, either on the wider or narrower display.
I wish I could give you some specific css to look at, as at one time I was an expert at this stuff, but a few years has gone by and I would have to refresh my memory.
Unless the web browser specifically lies about the width, looking at the display width won’t work if the user has had to choose no-scaling in order to run other applications - until such time as it all adapts automatically, as discussed in the above topic.
Looking at the width in pixels isn’t really the right approach. You want to know the width in real world units. That’s what a small screen really means.
I note that Safari on the spiPhone definitely lies about the width but I have no insight into where that is being implemented.
Another fun aspect is automatic rotation i.e. display rotates depending on whether the phone is being held landscape or portrait, or for that matter manual rotation. (I have no idea whether automatic rotation is even working yet on the L5 but presumably it will be in the future if not now.) If you depend on the width then you need to decide whether to depend on the orientation-dependent width (i.e. different if rotated) or some arbitrary orientation-independent width.
Who knows what you do with convergence e.g. mirroring phone display on external monitor.
@kieran, Agreed, relying on number of pixels isn’t good enough. I definitely want different layouts on a 5" phone and a 24" desktop screen, even if both are 1920 pixels wide.
Wonder if <link rel="StyleSheet" href="/small.css" type="text/css" media="handheld")"/>
gets around the problem. Anyone with experience from using it? (I’m not a frontend developer myself.)
Neither am I. I believe though that you could use resolution (in dpi) as a media query to distinguish the “even if both are 1920 pixels wide” scenario. It is possible that you could alternatively use a media query where width is specified in inches (or other real world units), rather than pixels.
