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.
Related
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">
I read this article https://css-tricks.com/snippets/html/responsive-meta-tag/ and followed tips by W3Schools, but I'm still confused with initial-scale=1.0.
I don't see the difference between this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this:
<meta name="viewport" content="width=device-width">
I tested these code snippets in many browsers, and I cannot determine which one I need to use. If I omit initial-scale=1.0 will browsers somehow add it for me? It looks they will.
The "initial-scale=1.0" part sets the initial zoom level when the page is first loaded by the browser. "width=device-width" sets the width of the page to follow the screen-width of the device, depending on what they are using.
Here is a good link to read up on it:
https://www.w3schools.com/css/css_rwd_viewport.asp
"On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:" - MDN ,
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I did use initial-scale=1, but I noticed that removing it - against recommendations on CSS Tricks and by the authors of UIkit (v2) - gave me a perfect, as-expected, initial scaling on page load using Chrome on Android and with the Silk browser on a Kindle. Including initial-scale=1 meant the pages were loading at some semi-random zoom level, which looked amateurish. Edge, Chrome and Firefox desktop browsers are fine, but I haven't tested more widely on mobile devices yet.
For Android, I'm leaving initial-scale=1 off and I'll need a very good reason to put it back on again.
<meta name='viewport' content='width=device-width'>
CSS tricks actually uses the above on its own (very fine) site
Just use initial-scale=1.0
You would see the difference when viewing your website on different mobile devices.
For example the page being a way larger width of the screen and you have a horizontal scrollbar. You may think use overflow-x: hidden but no just set the initial scale to 1 for all devices in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I have designed my site to be responsive without actually using
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It looks just the way I want it on mobile. The problem is, when I go to Google Insights, which to test if my site is mobile optimized, it says it is not. When I add the meta tag, it says my site is mobile optimized (even though it looks a lot worse to a human being).
My question is, can get around using the meta viewport tag while still having Google Insights tell me my site is mobile optimized and therefore adding that SEO benefit.
You don't want to be setting the viewport width to a specific size. This will make all devices view it as that set size.
Change it to 'device-width' like below and it will size to the devices width.
<meta name="viewport" content="width=device-width,initial-scale=1" />
I have a blog website where I used the viewport property to scale the site in mobiles, it was working perfectly using:
<meta name="viewport" />
Then it stopped working for no reason, didn't touch the code at all. Now I've been trying with everything I find online, from max-width to initial-scale, etc. Still doesn't work.
What could be happening? Is there any update that cancelled the viewport property?
My website: www.fake-leather.com
If you are not coding a responsive site, just don’t use any meta viewport. If you are coding a responsive website, all you need to write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Any additional parameters in the content attribute usually screw up user’s experience.
Reference: Stop using the viewport meta tag (until you know how to use it)
I am designing a mobile website and I first tried just to use a regular html page with a h1 tag. It looks very tiny so I searched and found out that I need to add these lines:
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
After trying several web pages to understand it, I still am confused. Is the viewport an additional device-width that on for example iPhone is 960px? Even though the iPhone 4 is only 640px so it scales it down to emulate that size? So in order to prevent it from thinking the viewport is 960px it says that it is equal to the size of the screen?
If this is the case, does other browswers/devices such as Android running devices have different widths (other than 960px)?
Per the jquery mobile documentation, there is a bug for iOS with this:
There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but
this will hopefully be fixed a a future release. You can set other
viewport values to disable zooming if required since this is part of
your page content, not the library.
They recommend the follow line:
<meta name="viewport" content="width=device-width, initial-scale=1">
You also don't need the user-scalable either, the above line won't disable user zoom.