RWD: Separating browser widths and device widths?

[johnny_rigs]

Hello, longtime lurker first time poster.

I’m redesigning my blog to be responsive and I’m having some difficulty targeting different desktop browser widths and mobile devices at the same time. I’ve done some reading and also looked through the styles of other responsive sites that I like, and I feel I’m missing something but I don’t know what.

After having setup different breakpoints for desktop browser window widths using:

@media only screen and min-width () and max-width() {}

rules, I previewed on my iPad and iPhone but it just looked scaled down (small text, etc.). Also, when I rotate my device, the page just scales up or down to fit the width, instead of stretching my layout and keeping text sizes the same. I’m using:

#container {
width: 80%;
max-width: 40em;
}

to control size. But if I use `min-device-width ()`, my browser gets all jacked up. I don’t get it. When I look through someone like [Trent Walton’s](http://trentwalton.com) site, all I see are `min-width: ()` declarations and everything just flows. Are there layout sizing methods that could be getting in my way?

Sorry I don’t have live code samples. But I can post any style sections here if’d you need to see. Thanks in advance for any help. I do plan on buying Ethan Marcotte’s book on RWD, as it seems I might need it.

[TheDoc]

Let’s just take a quick step back, here. Why are you trying to apply the same breakpoint at different widths depending on device? Surely if it needs to break at XYZpx on desktop it should need to break at the same point on devices?

[jurotek]

Going with responsive layout is not about any device. It is a mistake to concern yourself about all the devices out there and their width during RWD. You should be setting your breakpoints based on content alone.

[johnny_rigs]

@TheDoc. I keep reading your question, but I’m not entirely sure if I know what you mean. I want my breakpoints to be the same across every device, but it seems like smaller devices need larger text sizes, but smaller desktop windows don’t—that’s what I’m wrangling with. If I’m misunderstanding you, would you mind clarifying?

[TheDoc]

If you’re using the same breakpoints for layout, then you can simply just use `min-width` (don’t use -device).

Since you mentioned Trent’s site, you’ll notice that he’s using EMs and percentages to set all of the font sizes and margins.

[johnny_rigs]

Yup, agreed. That’s what I’ve been working towards, just with limited success. I think it’s just something wrong with my layout—I’m locking it in somehow. Bootstrapped my design and text flows fine, so I’ll just re-examine my approach.

[johnny_rigs]

Ok, I figured out what the problem was. I was missing this key piece in my ``:

This keeps the viewport from scaling as you rotate the device.

[Author]

Posts