I have a web site that uses separate templates for “desktop” and “mobile” visitors; the site includes “switch to desktop/mobile” links to allow visitors to change viewing modes. I am working on a new, responsive UI element whose HTML and CSS can work equally well on both desktop and mobile templates. For the purposes of my example below, let’s suppose it’s a new page header.
Example markup of desktop page:
<html class="desktop">
<head>…</head>
<body>
<div class="responsive_nav">Navigation bar content</div>
<div>Desktop body content</div>
</body>
</html>
Example mobile page markup:
<html class="mobile">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
…
</head>
<body>
<div class="responsive_nav">Navigation bar content</div>
<div>Mobile body content</div>
</body>
</html>
Because my mobile templates include a meta viewport tag, and desktop pages do not, when a user with a mobile browser loads a page in mobile mode, the page will be rendered inside a layout viewport appropriate to the user agent’s screen size. I.e., she’ll see the responsive header’s “small”/“mobile” breakpoint.
If she switches to desktop mode, loading a page template with no meta viewport tag, she’ll see a desktop-sized page zoomed way out, with the new header rendered at its “large”/“desktop” breakpoint.
My question is: what would it take for the responsive header to appear at its “zoomed in”/“small”/“mobile” breakpoint while keeping the rest of the desktop template's content zoomed out?
Put another way, have part of the page (the header) behave as if the meta viewport tag were present (small, device-appropriate layout viewport size), and the rest of the page behave as if there were no meta viewport tag (large, “desktop-sized” layout viewport).
Put yet another way, have part of the page behave as if we were at one (small/mobile) screen breakpoint, and another part of the page behave like the large/desktop breakpoint.
Solutions I have tried that don’t work:
Using the non-standard CSS zoom property on the header. This makes the header bigger, and keeps it inside the screen width, but does not change which breakpoint is applied. The effect is a larger, squished desktop header content instead of the mobile breakpoint.
Use CSS transform: scale. This is worse than zoom, because it doesn’t cause a breakpoint change and the header is not constrained within the screen (visual viewport).
Possible, but undesirable, solution: giant navbar
Make a giant-sized variant of the navbar’s small breakpoint so that when viewed zoomed out on a mobile device, it looks like it’s actually “normal mobile size”. i.e., make a copy of the smartphone breakpoint and scale it up (font sizes, widths, margins, everything).
I think this requires a lot of duplicate CSS, and possibly duplicate markup, and barring some magic with vh/vw, probably can’t be done in a way that exactly matches the screen size.
Are there any other possibilities?
Related
Hello and thank you,
I've seen a lot on horizontal spacers, but specifically, I am trying to put a padding space between the main body text and the left menu bar of this site.
Adding margin-left or padding does not seem to work. On desktop it looks great, but on mobile, the text never resizes to "fulls screen" length.
Any help would be great :) Thanks.
It looks like everything is fixed-width... from your sidebar to your >200px margins. Generally this is frowned upon because it causes tons of issues with smaller devices, and as #Tanckom suggested, you should probably look into restructuring the page with CSS grids.
This means that, without a major overhaul of the style sheet and structure, there's no quick and dirty solution that will make this page look good on mobile.
Here are a few steps you could take to chip away at a more responsive page design:
Add the following meta tag in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow you to make the page width take the full width of the viewing device.
Look into CSS Grids or CSS Flexbox as alternative methods of structuring your page. These carry the benefits of staying away from large fixed numbers (such as margins of over 200px), and are more easily manipulated when the screen size changes.
Look into CSS Media Queries, and see how you could use them to change your site's styling depending on screen size. One such media query might look like:
#media screen and (max-width:600px) {
#sidebar_container {
width:100%; /* or something like that */
}
}
I read on a website the following:
Mobile browsers render pages in a virtual "window" (the viewport),
usually wider than the screen, so they don't need to squeeze every
page layout into a tiny window (which would break many
non-mobile-optimized sites). Users can pan and zoom to see different
areas of the page.
I don't have much of experience, can someone please explain using other terms. I didn't understand how the mobile create a viewport and then let the user to zoom in that viewport.
It all means that the page it will fit the mobile's screen when using the meta tag , something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
So instead of the page showing like desktop view - all shrinked - and then you have to zoom in (a lot) to read, you can just simply scroll, because the content will fit properly the mobile/tablet's screen.
You may or may not be able to zoom depending on the property you use on the meta tag viewport.
This maximum-scale=1 will allow you to block zoom if your initial-scale=1
I've created the following web page:
http://isometricland.net/games/games.php
The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)
Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.
I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.
Please help!
Try adding the following to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
For further information, see Using the viewport meta tag to control layout on mobile browsers.
The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:
<div class="scroll-overflow">
<table>...</table>
</div>
div.scroll-overflow {
overflow-x: scroll;
}
Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.
You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.
Here's a before (left), and after (right).
I'm a relative newcomer to CSS, and I recently figured out how to use #media to query for a device or browser size, and help make the site responsive, but I've been having a lot of trouble with the <meta name="viewport"> tag (as I see a lot of other people have too).
The shift to the mobile view triggered by #media only screen and (max-device-width: 680px) is working just fine, but so far, on both iPhone and Android phones that I've tested it on, the initial view is partially zoomed in. For the mobile view version, I have the body, the container div, and the child elements sized at 540px or less and then used the following tag in the head of the html doc:
<meta name="viewport" content="initial-scale=1, width=device-width" />
But like I said, when I visit the site on a mobile device (like my Razr M, which has a screen resolution width of 540px), the viewing area shows up zoomed in, so that what I see is about 2/3rds of the full 540px of content, starting from the left. But then, if I manually zoom out, it stops at the correct size and everything looks good. The test site is up at http://thereisnomountain.com/indextest.html, and it relies on one stylesheet at http://thereisnomountain.com/style/tinmtest.css. Help would be appreciated!
I'm building a mobile optimized page for a my site. I'm new to mobile web optimization.
Everything looks fine on my dev machine, but when I go look at the page on my android mobile browser it looks absolutely tiny because it forces the full vertical section of text to show up in the browser. This does not happen on my desktop browser. Any ideas how I can stop this from happening and have it just show up with the full width in the mobile browser?
You're missing a meta-viewport tag, try this:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >
The important part is width=device-width, this will make sure that your HTML takes-up the full width of the screen. The initial and max scale properties are set to one to disable zooming, just change the maximum-scale value to something between one and ten to allow zooming.