Join Morten Rand-Hendriksen for an in-depth discussion in this video Taking device width into account, part of WordPress: Building Responsive Themes.
- View Offline
At this point, I can pretty much guess what's going to happen. …You are going to take your new media queries in your new theme, upload them to your server, …open the site on your phone, and notice that nothing happens. …Well, that's because we haven't quite gotten to the point where our media queries interact …with the phone yet. …And that is because cell phones lie. That's the reality. …They lie to the browser and to the web sites about what they are. …A cell phone browser pretends to be a desktop browser, and unless you explicitly ask the …cell phone browser, hey! How big is your screen? …the web site will have no idea how big that screen is and it will assume that this is a desktop.…
As a result, you will see the full-width content. …So what we need to do is make our web site ask the device how big the screen is. Fortunately. …It's very easy to do that. …All we need to do is go into our theme, open the header.php file, and add one line of code. …So I'll go and add it right here on top of title. …
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry