terra: fandom » ffvi, not an endorsement of dissidia (imperial witch)
[personal profile] terra posting in [community profile] vigils

More and more people are using their phones and other mobile devices to access their journals, but dreamwidth doesn't support the most common method of making websites responsive: CSS media queries.

By default dreamwidth doesn't configure the viewport. This means that on most mobile devices, instead of displaying a full-size layout, what you see is a a shrunk down version of what you'd see on a desktop, which is often too tiny to navigate, even if your layout was designed to work well on mobile browsers. To change this behavior, you have to add a meta tag to the <head> section of the code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Simple, right? The trouble is that to add this line of code to the <head> section, we're gonna have to venture into the somewhat arcane S2 system.

Luckily, customizing the <head> section is just about the easiest thing you can do with S2 layers, using the print_custom_head() function. First, you are going to need to create a new style layer. On DW this is in the Advanced Customizaton area. For this, you want to go to the Create a style-specific layer and then select theme in the first dropdown, then whatever layout you want to use in the second. It should look something like this, with your layout instead of Five AM:

Then, once you've created your theme layer, edit it, and call the custom head function:

function Page::print_custom_head() {
"""
<meta name="viewport" content="width=device-width, initial-scale=1">

""";
}

Then click compile, and it should return with no errors. You can add other things to your custom header, as long as they would normally go in the <head> section of the document, so <title>, <style> and other <meta> tags are all fair game. This is how I add custom titles to my journals:

function Page::print_custom_head() {
"""

<title>crawliiiing in my skiiin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

""";
}

In part two of this series, I'll explain how to use media queries to make mobile layouts with CSS!

Comment Depth: 1

Date: April 26th, 2017 04:52 am (UTC)
ex_aroceu318: (△ pkmn | white | indignant)
From: [personal profile] ex_aroceu318
this is super helpful and i've been trying to figure out how to do the <title> thing (or at least being too afraid to mess with the layers) for a while. thanks so much!
Edited Date: April 26th, 2017 04:53 am (UTC)
Comment Depth: 1

Date: October 22nd, 2020 02:52 am (UTC)
From: [personal profile] observator
I just stumbled upon this with a lucky google hit. Bless you for putting this out there. I'm adding this post to my mems until it's burned into my brain. <3
Comment Depth: 1

Date: March 25th, 2022 07:15 am (UTC)
From: [personal profile] owensrobin91
With more people accessing the internet via mobile devices, your website must be designed for different screen sizes. A single-column design will not cut it when it comes to responsive web design. This new technique ensures that your site will display its best on any device. The improved user experience leads to higher conversions and business growth. It also makes your website easier to read and navigate. Check out web design Sydney for tips and ideas.

Tags