![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
Responsive Web Design for Dreamwidth, Pt. I
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!
no subject
no subject
no subject