I am looking for a CSS package that will aid one in building a fluid/responsive layout with scrolling content... I don't know if I'm describing this accurately, but what I mean is represented well here and here.
there are others, but those 2 show it well enough.
Any tips to that? Am I overthinking things, and it's as simple as one big column-less CSS grid (i.e. I could even use twitter's Bootstrap as a starting place)? I've tried some simplistic designs with this, but it never seems to work for every device / every time I resize the screen.
Thanks all for the help.
When doing responsive design, you'll want to make sure you set a meta tag to viewport initial-scale value of 1. Mobile devices tend to pack more pixel values into actual pixels so that they fit on the screen, but if you set the viewport's initial-scale value to 1 then you're essentially telling the device you want the page to be viewed on at a 1 to 1 pixel ratio.
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
Related
I'm hoping to follow Material Design (not explicitly installing MD) using CSS, but the units are a little confusing for me. I know that most elements are sized and positioned on a 4dp or 8dp grid, but I'm not sure how that will translate into CSS units. I know using rems/ems are generally good practice for scalablity, but they aren't mentioned in Material Designed (at least in terms of size/positioning).
For instance, a <button> tag might be said to have 8'dp' padding; I want the button to scale for different devices, and I want to reuse as much CSS as possible.
Should I replace "dp" with "px" and just use pixel units, and use varying breakpoints to support different devices? Or should I approach this differently?
Yes, you should use pixel units, we don't have a native CSS unit that converts the passed value to a 4 (or 8) multiple.
And to keep the styles on the same scale for different devices you can use the following tag on your HTML file, inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
On W3Schools you can find a better explanation for the <meta> viewport element:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
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'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 am trying to make sure I properly understand the way the Meta viewport tag works when setting width=device-width.
Would it be a correct statement that when working on a mobile device with
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> usage of pixel units is (or should be) treated as if they are given on a grid that is 320 pixel wide? i.e. an element with width:160px would take up (160/320 = 50%) of the screen?
This behavior does not seem to work when running on a desktop browser,
so assuming that I want to get the same design on mobile and desktop, should/can I use either percentages or the vw/vh units?
The first thing to realize is that CSS pixels and device pixels are not the same thing. The number of pixels when you set something to width: 160px in CSS relates to CSS pixels, which have very little to do with the actual pixels of the device.
Mobile browsers (on reasonably modern smartphones) create a "fake" viewport, that is emulating a desktop-width browser size, that is also zoomed out so that it fits on the screen. The measurements for this fake viewport is usually somewhere around 800-1000 CSS pixels wide (iPhones, for example, use 980px). This is to make sure that non-optimized sites still display OK on phones, as you can zoom in on specific parts etc.
When you use the meta viewport tag with width=device-width, you are telling the device that your site is adapted for viewing on any viewport size, and that you don't want the "fake desktop" measurement.
Instead, the browser should set the number of CSS pixels that fit on the screen to what is considered the "ideal" number of pixels for that device. On old iPhones, that was actually 320 pixels. On iOS devices with a retina screen, the CSS-pixel-to-device-pixel ratio is different, so the screen is 640px wide, but the ideal number of CSS pixels is still only 320. On other smartphones, the measurement is different - usually anything from 300 - 500 pixels on a smartphone.
If you want your layout to adapt to the number of CSS pixels, you are probably better off leaving the specific pixel measurements out of it and use percentages. 50% of the viewport will always be 50% of the viewport no matter how many CSS pixels you have to play with.
More often than not, there is absolutely no need for these harmful declarations:
maximum-scale=1, user-scalable=no
My eyes are not very good and so often I find fonts used on web pages uncomfortably tiny. And what can be more annoying, if the site prevents me from zooming to be able to read it?
If you still think otherwise - please read carefully this article: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
Quotes from there (emphasis mine):
Declaring maximum scale
Setting a maximum scale means setting a maximum zoom. On a website where the access to the information is the top priority (most, if not all, websites), setting a maximum-scale=1 won’t allow the user to zoom. This might seem unimportant if you have a responsive website, but there are lots of cases when the user might need to zoom: small body font (at least, for the user’s needs), checking some details in a photograph, etc. Don’t trigger an accessibility issue just for aesthetic reasons.
User-scalable=no
This parameter removes the ability to zoom in or zoom out, and it’s even worse than maximum-scale. If there’s a really special reason to use it (e.g., you are coding a web app and need to avoid zooming in form inputs), try adding and removing it with JavaScript, just for the action you want to fix. Anyway, remember that smartphone users are used to zoom in and out any website, so having to zoom out after filling a form might be a default behavior and you don’t probably have to fix it.
Combo breaker
Now picture the combo-breaker: a non responsive website (fixed layout, about 960px width) with a viewport tag like
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
Congratulations, your website zoomed to the first 300px or 400px of the top left corner, the user can’t zoom out and the only way to access the information is by patiently viewing the website in pieces of 300px width. A whole experience screwed up by an extra tag.
I've come up with several Fixed width CSS Frameworks such as 960px GS and grid Generators. The problem with them I found is their fixed width. although it works best with Normal screen but Can I get or someone assist me with a CSS Framework that uses the entire width of the screen available. No of columns, gutter width etc are not much concerning factors.
Thanks in advance. :)
Making % based grids are incredibly easy, I think unless you're going to be using all the features of something like Bootstrap, you're just giving yourself a lot of extra bloat. Making a responsive grid system takes no more than 10/20mins and you'll have exactly what you need, nothing more, nothing less.
Here's a video about making a simple 2 column, % based grid.
And here's a blog post going through pretty much the same thing if you prefer to read about it.
To make mobile specific CSS you'll need some media queries going on, here's a post about that.
Also, if you're going to use media queries, don't forget to put:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
in the head of your pages.