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).
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 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?
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
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
I have been poking at this for hours now.
I used the wordpress twentythirteen theme as a starting point for a landing page I am working on. I have it looking exactly how I want it on desktop, but when I switch to my iphone, the footer doesn't render properly and there is a line that runs vertically along the right side of the frame.
Website: detroitvehiclewraps.tectonicsindustries.com
I have gone through everything I can think of and cannot make the problem go away. I deleted the PHP that detects mobile, as for the time being I want the site to display identically on mobile and desktop. Any help any of the CSS wizards on here could provide would be appreciated. I know I am just missing some inane little thing and I am absolutely losing my damn mind.
Thank you.
Try to insert a viewport meta tag into the <head>:
<meta name="viewport" content="width=990px, user-scalable=yes">
Iphone's default viewport is 980px wide, your content is 990px wide so the device scales it down. This is the "line" (10px) you observed on the right (the background color of body is white).
Note: you are mixing fluid and fixed with layout, try to clean it up a little bit. You should check out media queries too.