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!

Date: Wednesday, 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: Wednesday, April 26th, 2017 04:53 am (UTC)

Vigils

vig·il /ˈvijəl/
a : evening or nocturnal devotions or prayers —usually used in plural
b : the act of keeping awake at times when sleep is customary; also : a period of wakefulness

Page Summary