I know this technology is OLD, but I never understood how it was done.
Back in the days, before websites were responsive. Pages would just shrink all the way down and look like the full desktop display on mobile devices. Just smaller.
How do you do that? I want my website to just shrink down. But be the same throughout all media sizes.
How do you do that?
You do nothing.
That's how devices with small physical displays behave when given a webpage that doesn't explicitly state it has support for small viewports by opting-in with meta viewport.
You can use this one to view the same webpage allover screens.
<meta name="viewport" content="width=YOURCONTAINERWIDTH">
Eg:
<meta name="viewport" content="width=1200">
Related
So I'm trying to resize my webpage in css using the #media query for both monitor and mobile. However, my mobile is 1080x1920 and so is my monitor. So when I use the media query, my mobile inherits my monitor's css.
How do you distinguish from the two?
Thanks.
It's sounds as if your phone is zooming out to display the full website.
Have you got a "responsive meta tag" on the page? This should go in the <head></head> of your page.
<meta name="viewport" content="width=device-width">
It tells the browser to match the media query pixels to your devices actual width, and not it's pixel count.
I want to know what's the difference between <meta name='viewport'> and Responsive web design using CSS Media Screen?
Because these two things seem alike in functionality.
With or without <meta name='viewport'>, just by setting Media Screen I still can set different layouts for different screen sizes and the layouts automatically detect the screen sizes then set the matching layouts
Viewport meta tag almost uses some other options like this:
<meta name="viewport" content="width=device-width, initial-scale=1, , maximum-scale=1">
Through these options you can define some behaviors for your responsive website. Using <meta name='viewport'> without its options does not have any special affect on your website, although it can still be responsive.
You can check this page to get more information:
https://css-tricks.com/snippets/html/responsive-meta-tag/
<meta name="viewport"> tells browsers with small screens how they should map the CSS pixels onto real pixels. Essentially it is there to say "We've bothered to care about phone sized screens, don't zoom out" to the browser.
It is a prerequisite for (sanely) implementing responsive web design, not an alternative approach to it.
So I'm working on this new design for this website: www.descola.org.
I was working on my localhost and it was all great, and I was very careful to have a nice view on mobile screens.
But when I uploaded the new design to the server and opened on my phone, things were not as they should be displayed on "XS" screens. They are being shown as on "SM" screens. For instance, the navbar isn't collapsing and the images are shown beside the product descriptions instead of above them.
You can take a look at it here: www.descola.org/dev
Anyone have a clue on what am I missing here?
Cheers,
Sorry about the lack of details in the question. But I've figured it out.
Since the previous website wasn't responsive, these two statements wasn't in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Now it works!
Cheers,
What is the screen resolution of your phone? Your phone could have a physically small screen but with a reasonable resolution that is higher than 'XS'. So the fact that your phone is a mobile device does not automatically mean that it is an 'XS' device in fact it can be an 'SM' device
Cheers
I have the problem that my website is resizing correctly when I change the viewport in chrome or go to it directly on my phone.
It does work however when i just resize my browser window.
This is the website http://maxehlers.com/test/ if you would like to try it out.
Most stuff on the website is set up with percentages for with and height.
How can i make the website act responsively when accessing it from a mobile device? Do I have to add media queries?
I think you are missing the viewpoint meta tag
here are the docs on MDN
something like <meta name="viewport" content="width=device-width, initial-scale=1"> should sort it.
There is more good info here on css tricks on resposive tags
I'm trying to fix some pages on my web design and ran into an issue where the sidebar banner ads that look fine on my regular desktop browser seemed to display "off the screen" on the iPhone and Android devices. The issue seemed to go away by setting the viewport meta tag to a higher value (e.g. 1300). While no side-effects have been found yet I was curious if setting the tag to that high a value was indicative of a bigger design issue?
<meta name="viewport" content="width=1300" />
You should be using this meta tag:
<meta name="viewport" content="width=device-width">
Since if you are viewing your site on a mobile device, for example, your website will be tiny and unviewable.
<meta name="viewport" content="width=1300" />
What your meta tag does is to say to the browser,
"No matter the width of the screen this website is on (viewport width)
render it as though it were a 1300px wide screen."
What that will do is "zoom out" if your viewport is less than 1300px and "zoom in" if the viewport is greater than 1300px.
Now, it sounds to me that if you are using this to fix your layout, you have bigger problems. I highly recommend you to look into bootstrap as a way to make your layout responsive. Bootstrap is a library of css files that you add to your site to do quite a few things, one of which is to create a fluid, responsive grid system.
I recommend starting here to learn about bootstrap and what it can do and then google search some articles. Everyone loves it! Trust me, once you realize how simple it can make your life, you will love it too.
http://twitter.github.com/bootstrap/index.html