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" />
Related
I am developing a responsive website and I have doubts about the following statement related to viewport meta tag from Mozilla:
Suppress the small zoom applied by many smartphones by setting the
initial scale and minimum-scale values to 0.86. The result is
horizontal scroll is suppressed in any orientation and the user can
zoom in if they want to.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
Does this mean that responsive web pages should have this line to avoid possible small zooms in some smartphone, as Mozilla states in the link above?
I am asking because for me it is working initial-scale=1, but I see that in this link changes the scale. I actually see that most of people use scale 1, but did not find many cases using this 0.86 scale, which would make sense for me as I would like to avoid this possible zoom. Am I missing something?
Thanks!
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.
I'm using meta tags to scale a site.
It's for a demo on an iphone, so best practices can be ignored.
For some reason the scaling does not seem to change when I change the page from landscape to portrait. (I'm not talking about switching while rotating, I'm talking about full page reloads in a different orientation).
I'm testing the site in the iPhone simulator.
Am I missing something simple?
<meta name="viewport" content="width=320; initial-scale=.675">
<meta name="viewport" content="width=480; initial-scale=1">
Why are you using two viewport tags? These are not if-then statements; you should set the viewport value once. As it stands I would expect the second one to override the first (though really, anything can happen).
Also don't confuse width with device-width. Might help to reread http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
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.
Meta-tags "Viewport", "MobileOptimized" and "HandheldFriendly" can be used to provide appropriately formatted HTML-content to mobile devices. Are these tags good things? They seem pretty platform specific in many cases, and even when not platform specific (viewport), they seem to require device specific attributes in order to work properly.
Should they be used? Where and when is it appropriate to use them? Are there alternatives (without user-agent recognition)?
Note: I have been using CSS media queries to achieve mobile-support, but this requires some UAR in order to get optimize font size.
The simple answer is: viewport is good, the others are... less good.
viewport
viewport is a widely supported de-facto standard - originally created by Apple for mobile Safari on iPhone, it's been adopted by almost all other mobile browsers: Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
Simple example use case: make the site full width on mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The other two are older de-facto 'standards' for 'feature phones' - which are generally too old to support viewport:
HandheldFriendly
This tag was originally used to identify mobile content in AvantGo browsers, but became a general standard for identifying mobile websites. However, it’s unknown what range of browsers support this meta tag:
<meta name="HandheldFriendly" content="true"/>
MobileOptimized
This is a Windows-proprietary meta tag that also eventually became used as another means of identifying mobile content. The drawback with this tag is that a specific width must be given. Again, it’s unknown what the support for this tag is:
<meta name="MobileOptimized" content="320"/>
Summary
Use viewport unless you need to support older feature phones which don't support it, in which case, probably use both HandheldFriendly & MobileOptimized - but test your target devices and find out.
Should they be used? Where and when is it appropriate to use them? Are there alternatives (without user-agent recognition)?
They should be used when you want the effects they create - generally, telling phones what default zoom to use, controlling re-sizing, etc. This is a good explanation of why you might want to use viewport, for example: http://davidbcalhoun.com/2010/viewport-metatag - it also lists the other properties that you can set with viewport and what they do.
They only other way to achieve these effects, without using these metatags, is with funky JS tricks - which will be slower, require script loading, be difficult to maintain and will be unreliable. Browsers that don't support viewport will probably have very buggy JS interface to viewport related stuff; see the quirksmode links below.
References
For a really comprehensive explanation of this whole subject, see http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://davidbcalhoun.com/tag/mobileoptimized
http://www.quirksmode.org/mobile/ & http://www.quirksmode.org/mobile/tableViewport.html
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
The iPhone uses Safari as a browser. They have a developer page which gives you some information when to use the meta tag viewport:
For example, if your webpage is
narrower than 980 pixels, then you
should set the width of the viewport
to fit your web content
It is used like this:
<META name="viewport" content="width = 650" />
<META name="viewport" content="width = device-width" />
<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
Another article that might be interesting for you is A list Apart: "Put Your Content in My Pocket".