View using style other than your default?

[montuos]

SOLVED, with multiple options. THANK YOU!

I have recently started using my phone to access DW more often, and unsurprisingly I am finding that my styles, which I love and prefer to use on my desktop and laptop, do not play nicely with the tiny phone screen real estate.

Is there a way to keep my usual styles, but view pages when I'm on my phone using a different style, such as Mobility, instead?

[Edit to add] I'm specifically hoping to use an actual style rather than "?style=site" or "?style=light". [end edit]

Thanks for any advice you can give!

Comments

[koryou]

No need to change anything on your phone, it's just stuff that goes into the Custom CSS in your style settings.

Or you could do that, didn't think of that yesterday. There are only two themes for Mobility, so that's not much of a choice. Tried to find a list of theme IDs, but no luck. Looks like you actually have to apply the theme to get that, so it's a good thing you already have that one.

Okay, I fiddled around with the CSS a bit and tested it on my phone, so this should work.
Your style already defaults to a one column layout on smaller screens (if you didn't deactivate that in your account settings), so that's easy. Now go to your customization page and add this to the custom CSS:

@media (max-width: 750px) {
#header {
margin: 0;
}

.module-navlinks {
text-align: center;
margin-bottom: 0;
padding-right: 0;
}

#content {
margin: -50px 0 0;
}

#primary > .inner:first-child {
padding: 0 5px;
}

.navigation.topnav.empty {
margin-bottom: 0;
}

.entry {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.has-userpic .entry .header, .has-userpic .comment .header {
margin-left: 65px;
}

.has-userpic .entry .userpic {
margin: -4.5em 3px 3px;
}

.userpic img {
height: auto;
max-width: 60px;
}
}

@-ms-viewport {
width: device-width;
}

It changes nothing about the look of your layout when you look at it on a bigger screen, but you see the difference on your phone. If this is alright for you, then that's it, no need to do anything more.

It only takes effect on your own style of course.

[montuos]

I will study and play with this when I'm on a real computer again, and especially after I switch styles again (because I do that seasonally). If this method lets me adjust all my styles to allow good phone usability, that's even better than viewing in Mobility. Right now that solution is better for me because it's easy to understand and to do wherever needed, but I think I might like your css better once I understand how it works. Thank you!